I have a page with a lot of column flow content. On the page bottom there is "add" button, that adds some new content to the bottom. When i click it Chrome scrolls the page down with added content.
https://jsfiddle.net/gydn7ptk/4/show - jsfiddle. When i scroll down and click "add" i can see "scrolled" in console.
How does it works? Why Chrome automatically scrolls down the page? Because i want to stay on the same scrollTop position after update.
Since Chrome 84, the scroll anchoring selection was updated (see Chrome commit).
To avoid the scroll, you have to remove the focus on your clicked element.
In your exemple, you need to add e.target.blur(); on your click function.
$(document).on('click', '.update', (e) => {
e.preventDefault();
e.target.blur();
for (var i = 20; i >= 0; i--) {
$('.data').append('<div><article>data</article></div>')
}
})
document.addEventListener("scroll", (e) => {console.log('scrolled')});