14

I am using a mac trackpad.How to prevent the page going back and next to visited pages on horizontal scroll ?.

I tried to prevent the wheel events but it doesn't works most of the time. 

container.addEventListener('wheel', function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    return false;
}, {passive: false, capture: true});

even I tried blocking with mousewheel event which also leads to page navigation.

Prasanna Rkv
  • 419
  • 4
  • 12
  • [mvce](https://stackoverflow.com/help/mcve) ? – Jacob Goh May 31 '18 at 04:00
  • What do you mean "horizontal scroll"? Mouse wheels scroll vertically. Do you mean tipping the wheel to one side or another (supported on some mice)? If so, ensure those actions aren't mapped to back/forward in the mouse configuration (perhaps in an app from the manufacturer, or OS configuration). – TheJim01 May 31 '18 at 04:16
  • I am using mac trackpad to scroll. @TheJim01 "horizontal scroll" - i meant scrolling in x direction (left and right) – Prasanna Rkv May 31 '18 at 05:17
  • Then it's the same as for a wheel that tips--check your trackpad software or OS configuration for trackpad gesture support. – TheJim01 May 31 '18 at 13:27
  • If you're building a public facing website for users, you might want to consider whether overriding their default browser behaviour actually serves them, when they can change it theirselves if they want to. – Mark Fisher Aug 01 '19 at 13:17

2 Answers2

17

It has nothing to do with a webpage nor its events; this is specific system behavior and I don't think it can be blocked from javascript level.

If you want to disable it - go to: Apple Logo > Preferences > Trackpad > More gestures and uncheck Swipe between pages

// EDIT

Ok, I googled a bit and it seems I was wrong- there is a solution to that and basically is pretty simple:

document.body.addEventListener('mousewheel', function(e) {
  e.stopPropagation();
  var max = this.scrollWidth - this.offsetWidth; // this might change if you have dynamic content, perhaps some mutation observer will be useful here

  if (this.scrollLeft + e.deltaX < 0 || this.scrollLeft + e.deltaX > max) {
    e.preventDefault();
    this.scrollLeft = Math.max(0, Math.min(max, this.scrollLeft + e.deltaX));
  }
}, false);

Just tested this on OSX Chrome 67

danronmoon
  • 3,814
  • 5
  • 34
  • 56
Maciej Kwas
  • 6,169
  • 2
  • 27
  • 51
  • It didn't work and I just wanted to block scroll/wheel over only on one container. – Prasanna Rkv Jun 25 '18 at 16:43
  • So instead of `document.body` pass your element, like `document.getElementById`. Where are you testing this, browser version? – Maciej Kwas Jun 25 '18 at 20:46
  • Yes i did it over the container. but it didn't worked out :(. Browser: Chrome 67 – Prasanna Rkv Jun 26 '18 at 02:42
  • That's strange, as it work's for me and i work on osx with Chrome 67, though- try adding additional `e.stopPropagation()` as in edit above, maybe it's bubbling issue – Maciej Kwas Jun 26 '18 at 07:56
  • Nope, not working. I tried all possible ways even i blocked in the capturing phase. It didn't worked out. I dunno what i am doing wrong here. – Prasanna Rkv Jun 28 '18 at 08:00
  • @PrasannaRkv please attach a fiddle then. Are you using touchbar or magicmouse? – Maciej Kwas Jun 28 '18 at 08:10
  • Here's the fiddle https://codepen.io/PrasannaRkv/pen/pKqJaz I am using macbook's touchpad. Even i get the same results with magic mouse or trackpad. – Prasanna Rkv Jun 29 '18 at 03:56
  • @PrasannaRkv That pen works for me on Chrome & macbook. Note that, naturally, the cursor has to be on the grey container for the eventlistener to block the back/forward gesture — outside of the container scrolling and gestures work normally. Also: do you have any 3rd party software that would mingle with the gesture (e.g. BetterTouchTool)? – Jari Keinänen Jun 29 '18 at 11:50
  • not once if i have triggered the page navigation via the gesture. I couldn't block the scroll from that point. if i have visited the page via mouse gesture i.e if swipe back and came bak to the page again. it never worked. And do you have a history of pages so that back and forward will be enabled ? If not the issue won't be there at all. – Prasanna Rkv Jun 30 '18 at 09:20
10

You can do this with CSS.

html {
  overscroll-behavior-x: contain;
}

Documented for Chrome here.

contain - prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they've hit a scroll boundary. Note: using overscroll-behavior: contain on the html element prevents overscroll navigation actions.

Tested on chrome version 77 OSX

Note: This is still a non-standard CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

ZCaceres
  • 83
  • 4
Charles Holbrow
  • 3,967
  • 6
  • 30
  • 35