How to prevent a browser from going back/forward in history when scrolling horizontally?

Question

How can one disable a modern browsers default functionality using JQuery or Native JS for going backwards or forwards when scrolling horizontally?

This usually happe

Answer 1

Here's something that may work for you using CSS' overscroll-behaviour property:

Javascript

document.body.style.overscrollBehaviour = "contain";

CSS

body {
    overscroll-behaviour: contain;
}

At the time of writing this, July 10th 2020, this causes scrolling left at the left-end of the page to no longer trigger a backward history-navigation.

I'm not sure what other side-effects this will have on the rest of the user experience. I wish this could be applied inside elements, but it seems like this will only work when applied to the document body.