我正在创建一个页面，记录您在该页面上的点击，并将其保留在被点击的div中。但是，只要您滚动四个div之一，该.notediv（包含“ touch”文本）就应该随其所在的div一起滚动。我已经尝试了一些方法，但是似乎无法管理使这项工作的方法...
$(document.body).click(function (c) {
var tw = 100/2;
var th = 30/2;
$('.note:last').clone().appendTo('.wrapper');
$('.note:last').css({ position: 'absolute', display: "block",
left: c.pageX-tw, top: c.pageY-th
});
// $('.note').remove();
});
body{
font-family: sans-serif;
font-size: 1.3rem;
margin: 0;
background-color: DarkSlateGray;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100vh, auto);
height: 100vh;
}
.one {
position: relative;
overflow: scroll;
height: 100%;
background-color: tan;
grid-column: 1 / 2;
}
.two {
position : relative;
overflow: scroll;
background-color: tan;
grid-column: 2 / 3;
height: 100%;
}
.three {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
overflow: scroll;
background-color: tan;
grid-column: 3 / 4;
height: 100%;
}
.four {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
overflow: scroll;
background-color: tan;
grid-column: 4 / 4;
height: 100%;
}
.one::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.two::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.three::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.four::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.note{
text-align: center;
width:100px;
height: 30px;}
.direction{
position: absolute;
bottom : 0;
width: 25vw;
text-align: center;
}
.username{
background-color: red;
display: block;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="one">
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
</div>
<div class="two">
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
br<br>
</div>
<div class="three"></div>
<div class="four"></div>
</div>
<div class="note"></div>
<div class ="texte"></div>
<div class="note" style="display: none;">touch</div>为了滚动到被单击的列，您需要.append()将.note进入正确的列。
更改事件处理程序以$(".wrapper>div")使div单击即可使用.append(this)。
调整列的左侧位置，并对.sree / .four具有不同属性（no position:relative）的cs进行一些调整，这似乎正常工作
编辑：添加了.scrollTop（）调整
$(".wrapper>div").click(function(c) {
var tw = 100 / 2;
var th = 30 / 2;
$('.note:last').clone().appendTo(this).css({
position: 'absolute',
display: "block",
left: c.pageX - tw - $(this).position().left,
top: c.pageY - th + $(this).scrollTop()
});
});body {
font-family: sans-serif;
font-size: 1.3rem;
margin: 0;
background-color: DarkSlateGray;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100vh, auto);
height: 100vh;
}
.one,
.two,
.three,
.four {
position: relative;
overflow: scroll;
height: 100%;
background-color: tan;
}
.one {
grid-column: 1 / 2;
}
.two {
grid-column: 2 / 3;
}
.three {
grid-column: 3 / 4;
}
.four {
grid-column: 4 / 4;
}
.note {
text-align: center;
width: 100px;
height: 30px;
}
.direction {
position: absolute;
bottom: 0;
width: 25vw;
text-align: center;
}
.username {
background-color: red;
display: block;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="one">
br<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br>
</div>
<div class="two">
br<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br> br
<br>
</div>
<div class="three">col 3</div>
<div class="four">col 4</div>
</div>
<div class="note"></div>
<div class="texte"></div>
<div class="note" style="display: none;">touch</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句