绝对元素在 div 滚动时滚动

Question

我正在制作一个页面，您在页面上的点击被记录并保留在它被点击的 div 中。 但是一旦你滚动四个 div 之一， .note div（包含“触摸”文本）应该随它所在的 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>

Answer 1

查看更新的代码。

我从这个改变了你的jQuery：

$(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();
});

对此：

$(document.body).click(function (c) { 
      var tw = 100/2;
      var th = 30/2;
      $('.note:last').clone().appendTo('.one').css({ position: 'absolute', display: "block",
        left: c.pageX-tw, top: c.pageY-th
      });
      // $('.note').remove();
});

通过我的更改，如果您希望它适用于其他 div，则必须为每个 div 指定 jQuery。

此外，您还必须调整您的定位，使其适用于整个 div。

运行下面的代码片段：

 $(document.body).click(function (c) { var tw = 100/2; var th = 30/2; $('.note:last').clone().appendTo('.one').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>

Answer 2

为了滚动被点击的列，您需要将.append() .note到正确的列中。

将事件处理程序更改为$(".wrapper>div")以单击 div，您可以使用.append(this) 。

对列左位置的调整和对 .three/.four 具有不同属性的 css 的一些调整（没有position:relative ），这似乎可以正常工作

编辑：添加了 .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>