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

【问题标题】：absolute element scrolls as the div is scrolled绝对元素随着 div 的滚动而滚动
【发布时间】：2020-11-10 03:48:00
【问题描述】：

我正在创建一个页面，记录您对该页面的点击并保留在它被点击的 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>

【问题讨论】：

我正在尝试记录我在页面上单击的位置，但是当滚动 div（.one .two）时，“touch”元素应该与滚动元素一起移动。抱歉，不是很清楚。
不用担心 - 当我取消隐藏滚动条时会更清楚 - 原来只有一个页面级滚动条而不是单个列
现在可能有点用了！但它仍然是错误的。我似乎无法让它在.two div 上工作，如果滚动 div，它会显示位置奇怪的“触摸”文本非常感谢

标签： javascript html jquery css css-position

【解决方案1】：

要滚动点击的列，您需要将.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 中的某个位置时它有一个偏移量
哈哈，非常感谢！我不知道从哪里开始...
为你添加了它，但为了将来参考，你会和我一样从同一个地方开始：stackoverflow.com/search?q=%5Bjquery%5D+scoll+position
非常感谢您的帮助。我可能会比你花更多的时间来解决这个问题

【解决方案2】：

查看更新后的代码。

我从这里改变了你的 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。

运行下面的sn-p：

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

【讨论】：