How to disable scrolling temporarily?
The scroll
event cannot be canceled. But you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
[Working demo]
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e.preventDefault();
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}
var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}
// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
UPDATE: fixed Chrome desktop and modern mobile browsers with passive listeners
Disable Scrolling on Body
Set height
and overflow
:
html, body {margin: 0; height: 100%; overflow: hidden}
http://jsfiddle.net/q99hvawt/
How to programmatically disable page scrolling with jQuery
The only way I've found to do this is similar to what you described:
- Grab current scroll position (don't forget horizontal axis!).
- Set overflow to hidden (probably want to retain previous overflow value).
- Scroll document to stored scroll position with scrollTo().
Then when you're ready to allow scrolling again, undo all that.
Edit: no reason I can't give you the code since I went to the trouble to dig it up...
// lock scroll position, but retain settings for later
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
How to disable scrolling temporarily?
The scroll
event cannot be canceled. But you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
[Working demo]
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e.preventDefault();
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}
var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}
// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
UPDATE: fixed Chrome desktop and modern mobile browsers with passive listeners
How to disable scroll without hiding it?
If the page under the overlayer can be "fixed" at the top, when you open the overlay you can set
body { position: fixed; overflow-y:scroll }
you should still see the right scrollbar but the content is not scrollable. When you close the overlay just revert these properties with
body { position: static; overflow-y:auto }
I just proposed this way only because you wouldn't need to change any scroll event
Update
You could also do a slight improvement: if you get the document.documentElement.scrollTop
property via javascript just before the layer opening, you could dynamically assign that value as top
property of the body element: with this approach the page will stand in its place, no matter if you're on top or if you have already scrolled.
Css
.noscroll { position: fixed; overflow-y:scroll }
JS
$('body').css('top', -(document.documentElement.scrollTop) + 'px')
.addClass('noscroll');
How to disable scrolling temporarily?
The scroll
event cannot be canceled. But you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
[Working demo]
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e.preventDefault();
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}
var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}
// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
UPDATE: fixed Chrome desktop and modern mobile browsers with passive listeners
Disable scrolling but keep the bar visible
Try to calculate the scrollbar width of the browser using
var scrollbarWidth = window.innerWidth - document.body.clientWidth;
And when popup is visible add overflow: hidden
to remove scrolling with margin-right
equal to the width of scrollbar so that the page does not jump using Object.assign
like
var scrollbarWidth = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
overflow: "hidden",
marginRight: scrollbarWidth + "px"
});
>>>Note: Make sure your body has margin:0
by default
var scrollbarWidth = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
overflow: "hidden",
marginRight: scrollbarWidth + "px"
});
console.log(document.body.style.marginRight);
body {
margin: 0;
}
Related Topics
Why Do Regex Constructors Need to Be Double Escaped
Creating Multiline Strings in JavaScript
What Is Event Bubbling and Capturing
How to Check Whether a String Contains a Substring in JavaScript
Abort Ajax Requests Using Jquery
Simplest Code For Array Intersection in JavaScript
How to Debug My JavaScript Code
How to Stop the Browser Back Button Using JavaScript
Is It Right to Think of a JavaScript Function Expression That Uses the 'New' Keyword as 'Static'
Why Doesn't This Arrow Function Work in Ie 11
How to Convert Decimal to Hexadecimal in JavaScript
Passing Data Between Controllers in Angular Js
How Does JavaScript Handle Ajax Responses in the Background
Recursive Function Returns Undefined
JavaScript Check If Variable Exists (Is Defined/Initialized)
How to Get the Full Object in Node.Js'S Console.Log(), Rather Than '[Object]'