jQuery or Javascript - how to disable window scroll without overflow:hidden;
Try to handler 'mousewheel' event on all nodes except one
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
Demo: http://jsfiddle.net/DHz77/1/
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 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
disable main window scrolling - Jquery
You probably need to call
$("body").scroll(function(e){ e.preventDefault()});
when lightbox is opened.
You also may be interested with this question.
How To Disable Scrolling During Loading?
You can add by default a class to your body the class should be as follows.
// CSS
.no-scroll {
overflow: hidden;
}
<body class="no-scroll">
Once your script has completed or your function finishes you just call
document.body.classList.remove('no-scroll');
Make sure to add the following section at the end of your page.
<script type="text/javascript">
(function(){
function onReady() {
document.body.classList.remove('no-scroll');
}
if ( document.readyState === 'complete' ) {
onReady();
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
})();
</script>
Or you can do it with jQuery
// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
document.body.classList.remove('no-scroll');
});
PS: Additionally to that consider the unlike scenario when someone does not have JavScript enabled so you add a default behavior. Take a look at <noscript>
tag.
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
Related Topics
Jquery Validate Plugin - How to Create a Simple Custom Rule
What's the Difference Between Event.Stoppropagation and Event.Preventdefault
Detect the Internet Connection Is Offline
How to Post Urlencoded Form Data With $Http Without Jquery
Why This JavaScript Regex Doesn't Work
Check If an Array Contains Any Element of Another Array in JavaScript
Ecmascript Template Literals Like 'Some ${String}' Are Not Working
Graph Visualization Library in JavaScript
How to Count String Occurrence in String
How Does This JavaScript/Jquery Syntax Work: (Function( Window, Undefined ) { })(Window)
Set Keyboard Caret Position in HTML Textbox
Chained Promises Not Passing on Rejection
How to Check If File Exists in Jquery or Pure JavaScript
How to Deep Clone in JavaScript
Jquery in Greasemonkey 1.0 Conflicts with Websites Using Jquery