How to lock scrollbar and leave it visible

Question

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!

Answer 1

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