admin管理员组

文章数量:1328347

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
Add a ment  | 

1 Answer 1

Reset to default 8

You 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

本文标签: javascriptHow to lock scrollbar and leave it visibleStack Overflow