javascript - How to lock scrollbar and leave it visible - Stack Overflow

admin管理员组

文章数量:1328762

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!

• javascript
• css
• scrollbar

Share Improve this question Follow edited Aug 3, 2019 at 21:16 Smart Manoj 5,86166 gold badges4444 silver badges6363 bronze badges asked Nov 29, 2012 at 17:51 lukalelilukaleli 3,64533 gold badges2525 silver badges3232 bronze badges 1

• 1 now it is. for sure. – James K. Commented Aug 18, 2017 at 2:34

Add a ment  | 

1 Answer 1

Sorted by: 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