Lock scroll on hover jquery

Question

<div class="chatcontainer_inner_popup" onmouseover="_stopScroll = true;" onmousout="_stopScroll = false;">

$(document).ready(function ($) {
    $('.chatcontainer_inner_popup').hover(function () {
        _stopScroll = true;
    }, function () {
        _stopScroll = false;
    });
    document.body.onscroll = function (ev) {
        if (_stopScroll) {
            var dist = document.body.scrollTop();
            document.body.scrollTop = dist;
        }
    }
})

This code, should In my mind, lock the scroll of body when hovering over the .chatcontainer_inner_popup, to the given point in which the scroll was, before the hovering.In other words, if I were to scroll 500 pixels down, then hover .chatcontainer_inner_popup, the scroll of the body would be locked to 500 pixels down, and once leaving the hover enabling scroll on body again.

For some reason, beyond me, this code is not working - can anyone help me figure out why?

Use `return false;` code: `document.body.onscroll = function (ev) { if (_stopScroll) { var dist = document.body.scrollTop(); document.body.scrollTop = dist; } else { return false; } }` — Tushar, Oct 24 '15 at 14:33

score 0 · Answer 1 · answered Oct 24 '15 at 17:36

$(document).ready(function () {
    var dist;
    $(".chatcontainer_inner_popup").mouseenter(function () {
        dist = $(document).scrollTop();
    })
    function disableScrolling() {
        var x = window.scrollX;
        var y = window.scrollY;
        document.onscroll = function () { window.scrollTo(0, dist); };
    }
    function enableScrolling() {
        document.onscroll = function () {};
    }
    $(".chatcontainer_inner_popup").mouseenter(function () {
        disableScrolling();
    })
    $(".chatcontainer_inner_popup").mouseleave(function () {
        enableScrolling();
    })
});

Lock scroll on hover jquery

1 Answers1