CODEWITHSUNDEEP
javascriptgoogle-chrome
Mike Keskinov
Mike Keskinov

Reputation: 11878

Chrome browser automatically scrolling down the content (when nobody asked it to)

We have rich page where we have one little block with dynamic content. Everything worked just fine until recently.

Now Chrome browser somehow "capture" the one div on the page and scroll down the whole content. It's hard to explain in words, but much easier to demonstrate.

Here is test page. Just open it in Chrome, and scroll a little bit down so the one of the blue boxes will be on the very top border of viewport. You will see that all content (numbers 1,2,3..) is scrolling by itself when the blue box stays on same place.

It may looks logical in this simple example, but consider that the dynamic block is only one of many blocks on the page and there's no reason to scroll the whole content because something changing inside the block.

<html>
<body>

<div id="x" style="border:solid 1px red;width:200;height:200">
</div>

1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>


<script>
setInterval(function () {
    var e = document.createElement('div');
    e.setAttribute("style", "border:solid 2px blue;width:100px;height:20px");

    var x = document.getElementById('x');
    x.insertBefore(e, x.childNodes.length?x.childNodes[0]:null);
}, 1000);

</script>

</body>
</html>

We just discovered this Chrome weird behavoir this week. The code worked fine for last 6 months, so I think it's something new that Chrome made. All other browsers works fine.

== UPDATE ==

Using Chrome (I have latest v. 56.0.2924.87 (64-bit)) to http://www.thefreedictionary.com/ and scroll down until "Live searches" (box with moving words) appears on the very top of your browser. You will experience that instead of normal behavior, the whole page starts moving.

Upvotes: 18

Views: 13236

Answers (1)

azs06
azs06

Reputation: 3517

This could be happening because of the scroll anchoring feature of chrome 56, https://developers.google.com/web/updates/2016/04/scroll-anchoring, https://www.chromestatus.com/feature/5700102471548928

Workaround to fix this issue is to set overflow-anchor: none; on parent element. For your reference website 

#dvLiveSearch{
   overflow-anchor: none;
}

This would fix the weird behavior on chrome.

Upvotes: 37

Related Questions