Instantsearch.js: Question on "infiniteHits" widget

[fujiii]

Hi!

Recently noticed that clicking load more button on infiniteHits widget forces window to jump/scroll to the bottom. I don't recall this behavior previously as well as I did not updated instantSearch for some time.

So the question is - is it a default behavior? Meaning previously I had something on my site preventing it from jumping to the bottom on load more click?

Or it's not a default behavior, meaning I broke up it somehow?

Cheers and thank you!

[Haroenv]

Hi @fujiii, this is a bug / change in behaviour in chrome we also track in https://github.com/algolia/react-instantsearch/issues/2966

You can update to InstantSearch.css v7.4.3 with the following workaround (which you can also add without updating):

// Prevent InfiniteHits buttons from moving scroll position
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1110323
 .ais-InfiniteHits-loadPrevious,
 .ais-InfiniteHits-loadMore {
   overflow-anchor: none;
 }

[fujiii]

@Haroenv,

thank you for explanation and more elegant solution, because I had to solve it like this:

$('body').on('click', '.ais-infinite-hits--showmoreButton',
function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
window.onscroll = function() {
window.scrollTo(0, scrollTop);
window.onscroll = function() {};
};
});