Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent page navigation on horizontal scroll

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.

like image 839
Prasanna Rkv Avatar asked May 31 '18 03:05

Prasanna Rkv


People also ask

How do I restrict horizontal scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I stop horizontal scrolling in responsive website?

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

How do I turn off horizontal scrolling in windows 10?

Open Settings > devices > mouse & touchpad > Turn the Scroll inactive windows when I hover over them option on. Was this reply helpful? I fixed it myself.

Why is my page scrolling horizontally?

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow. The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.


1 Answers

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

like image 135
Charles Holbrow Avatar answered Sep 24 '22 02:09

Charles Holbrow