Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view.
What is causing this behavior? Why was it introduced and how can it be disabled?
Here is some code that reproduces the issue to some extent:
$(document).ready(function() {
var html = $(".container").html();
$("#load-more").click(function(){
$(".container").append(html);
})
}).container {
width: 400px;
margin: 0 auto;
background-color: aqua;
padding: 1em;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<article>
<h3>Foo Bar 1</h3>
<p>hello world</p>
</article>
<article>
<h3>Foo Bar 2</h3>
<p>hello world</p>
</article>
<article>
<h3>Foo Bar 3</h3>
<p>hello world</p>
</article>
</div>
<button id="load-more">load more</button>
</body>
</html>It's interesting to note that in Chrome(ium), the clicked button remains in view even though one would expect otherwise.