绝对元素随着 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 指定 jQuery，如果您希望它适用于您的其他 div。

此外，您还必须调整您的定位，以便它适用于整个 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).

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

编辑：添加了 .scrollTop() adjustment

$(".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>

绝对元素随着 div 的滚动而滚动

absolute element scrolls as the div is scrolled

html

javascript

css

jquery

css-position