Menu
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.
264
In Chrome when scrollbar is dragged to the bottom of a page with a table and table says "Fetching data", it starts automatically scrolling back to the top without user interaction. This happens when Windows display settings are set to Medium - 125%, or reduce the scale (zoom) to 90%, 67%, 33% in Chrome.
If you open the Chrome Dev Console (CTRL-Shift-J), you can run the code from there and confirm that it works. It disables AutoScroll, but still allows the middle mouse button to be used to open links in new tabs and close open tabs. The code stops working if you leave the page you run it on.
This might be because of issues with the program itself or virus or mouse. Step 1: Check if any program is causing this issue by performing clean boot on the computer. Step 2: Also run online virus or malware scan and check. Step 3: Try using a different mouse, if you have any, and check.
Change Mouse Settings Step 1: Press Win + I at the same time to open the Windows Settings interface. Step 2: Navigate to Devices > Mouse. Step 3: Disable the option of Scroll inactive windows when I hover over them. Then, see if the issue of Windows 10 uncontrollable scrolling is fixed.
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.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
