Skip to content Skip to sidebar Skip to footer
Home / Css / Google Chrome / Html / Javascript

Prevent Page Scroll When Data Changes In Nested Scroll In Chrome

Post a Comment
I have a fixed-sized element in a page with 'overflow: scroll' which content is changes often. I expect that changes happened inside this element can affect scroll of this element,

Solution 1:

one hacky solution is to store the value of the scroll before adding content and use it after:

setInterval(function() {
 var s= $(window).scrollTop();
 $('.scrollable').children().first().remove();
 $('.scrollable').append('<div>'+(Date.now())+'</div>');
 $(window).scrollTop(s);
}, 1000);

;
.demo {
  font-size: 24px;
}

.scrollable {
  height: 300px;
  overflow-y: scroll;
  background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  String<br>
  String<br>
  String<br>
  String<br>
  <div class="scrollable">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
</div>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
</div>

Solution 2:

It happens because you remove element from the DOM - and then adding new - so that you change the height of the elemnt for a second, the page is scroll.

you should replace the element instead removing it.

for example - and this is not logically what you have intended: 

setInterval(function() {
 $('.scrollable').children().first().replaceWith('<div>'+(Date.now())+'</div>');
}, 1000);

will just change element without changing the height or window.offset


Solution 3:

I ended up by adding an empty div with width of 1px. It's seems that chrome find the first element from the top and move scroll relative to this element. But my solution is pretty hacky and I can't find description of this behaviour in any specs.

<body>
    <div style="height: 300px; opacity: 0; width: 1px; float: left;">
    </div>
    <div style="overflow-y: scroll;height: 300px">
        Content that changes often
    </div>
    Content that should not move even the upper block is changed
</body>

https://jsfiddle.net/y3vtued6/


Post a Comment for "Prevent Page Scroll When Data Changes In Nested Scroll In Chrome"