Menu
Open the Settings app and go to the Devices group of settings. Go to the Touchpad tab. Scroll down to the Zoom and Scroll section, and uncheck the 'Drag two fingers to scroll' option. This will disable scrolling on the touchpad.
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
body has a margin by default in different browsers, generally it is around 8px, so you can remove it by using margin: 0 . Your main css property should always come after your vendor prefixes such as -webkit- , -moz- , etc.
Set height and overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
http://jsfiddle.net/q99hvawt/
HTML css works fine if body tag does nothing you can write as well
<body scroll="no" style="overflow: hidden">
In this case overriding should be on the body tag, it is easier to control but sometimes gives headaches.
This post was helpful, but just wanted to share a slight alternative that may help others:
Setting max-height instead of height also does the trick. In my case, I'm disabling scrolling based on a class toggle. Setting .someContainer {height: 100%; overflow: hidden;} when the container's height is smaller than that of the viewport would stretch the container, which wouldn't be what you'd want. Setting max-height accounts for this, but if the container's height is greater than the viewport's when the content changes, still disables scrolling.
To accomplish this, add 2 CSS properties on the <body> element.
body {
height: 100%;
overflow-y: hidden;
}
These days there are many news websites which require users to create an account. Typically they will give full access to the page for about a second, and then they show a pop-up, and stop users from scrolling down.
In addition, some websites (e.g. Quora) also make portions of text blurry. In general they do this by applying the following CSS.
filter: blur(3px);
useEffect to the rescue!
function useImperativeDisableScroll({ element, disabled }) {
useEffect(() => {
if (!element) {
return
}
element.style.overflowY = disabled ? 'hidden' : 'scroll'
return () => {
element.style.overflowY = 'scroll'
}
}, [disabled])
}
You could use this with e.g.
useImperativeDisableScroll({ element: document.body, disabled: true })
Depending on your use case, you may have better luck with
useImperativeDisableScroll({
element: document.scrollingElement,
disabled: true
})
Note however that at time of writing, you might have to polyfill document.scrollingElement.
Useful links:
HTML
<body id="appBody">
....
</body>
JS
function disableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.add("stop-scroll");
}
function enableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.remove("stop-scroll");
}
CSS
.stop-scroll {
margin: 0;
height: 100%;
overflow: hidden;
}
Why don't you try this:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With