absolute element scrolls as the div is scrolled

Question

I'm making a page where your click on the page is recorded and remains in the div it was clicked. But as soon as you scroll one of the four divs, the .note div (containing the "touch" text) is supposed to be scrolled with the div it is in. I've tried a few things but I can't seem to manage a way to make this work...

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

I'm trying to record where I click on the page, but when a div (either .one .two) is scrolled, the "touch" element should move with the scrolled elements. I'm sorry it's not very clear. — Aurore, Nov 09 '20 at 19:39
No worries - it was clearer when I un-hid the scroll bars - the original only had a page-level scroll bar not individual columns — freedomn-m, Nov 09 '20 at 19:40
maybe it's working a bit now ! but it's still buggy. I don't seem to be able to make it work on the `.two` div and if the div is scrolled it shows the "touch" text with a weird position Thanks a lot — Aurore, Nov 09 '20 at 19:43

score 1 · Answer 1 · answered Nov 09 '20 at 19:42

See the updated code.

I changed your jQuery from this:

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

to this:

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

With my change, you will have to specify jQuery for each div if you want it to work for your other divs.

Additionally, you will also have to adjust your positioning so it will work on the entire div.

Run the snippet below:

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

freedomn-m · Accepted Answer · 2020-11-09T19:48:00.333

In order to scroll with the column that was clicked, you'll need to .append() the .note into the correct column.

With a change to the event handler to $(".wrapper>div") to get the div clicked you can use .append(this).

An adjustment for the column left position and some tweaks to the css where .three/.four had different properties (no position:relative) and this seems to work correctly

Edit: Added the .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>

yes! It's working quite well! But it has an offset when you click somewhere in the scrolled div — Aurore, Nov 09 '20 at 19:46
Added it for you, but for future reference, you'd start the same place as I did: https://stackoverflow.com/search?q=%5Bjquery%5D+scoll+position — freedomn-m, Nov 09 '20 at 19:48
thanks a lot for the awesome help. I would probably have figured it out with a lot more time than you — Aurore, Nov 09 '20 at 19:50

absolute element scrolls as the div is scrolled

2 Answers2