I have a dialog box appearing when user clicks on any of the flat.
What I want to do is to lock scrollbar if viewport height is bigger than 550px. Now I apply overflow:hidden
to body, but this causes site jumping when scrollbar is hiding. I want to disable scrolling, but still show a scrollbar. Is it possible?
Thanks in advance!
I have a dialog box appearing when user clicks on any of the flat.
What I want to do is to lock scrollbar if viewport height is bigger than 550px. Now I apply overflow:hidden
to body, but this causes site jumping when scrollbar is hiding. I want to disable scrolling, but still show a scrollbar. Is it possible?
Thanks in advance!
Share Improve this question edited Aug 3, 2019 at 21:16 Smart Manoj 5,8616 gold badges44 silver badges63 bronze badges asked Nov 29, 2012 at 17:51 lukalelilukaleli 3,6453 gold badges25 silver badges32 bronze badges 1- 1 now it is. for sure. – James K. Commented Aug 18, 2017 at 2:34
1 Answer
Reset to default 8You can simulate a scrollbar lock by detecting the scroll, and scrolling back to the previous position.. (this might appear jerky on some browsers especially if you drag the scroll bar itself)
function lockScroll() {
var lockX = window.scrollX;
var lockY = window.scrollY;
function lockIt() {
window.scrollTo(lockX,lockY);
return false;
}
window.addEventListener("scroll",lockIt,false)
return {
stop: function(){
window.removeEventListener("scroll",lockIt,false)
}
}
}
Usage:
var locker = lockScroll(); // locks scrolling
And when you're done you can re-enable scrolling
locker.stop(); // unlocks scrolling