javascript - 当鼠标位于 Bootstrap 弹出框滚动条内时，我必须防止页面的其余部分滚动

Question

我有这个 Bootstrap 弹出窗口，允许用户在我的网站上放置内联评论: http://i.imgur.com/8QFFQcf.png

右上角有一个滚动条。如果用户在框中向下滚动并触及底部，则其后面的页面将开始滚动。当此弹出窗口处于焦点/正在滚动时，有什么方法可以防止用户滚动主页吗？

在我的上下文中接受的解决方案:

            $('.my-class').on('shown.bs.popover', function () {
                $('.popover-title').hover(function(e) { //popover title is
                //the scroll window in the popover

                    $('body').addClass('no-scroll');
                }, function() {
                    $('body').removeClass('no-scroll');
                });
            });

这是 CSS:

.no-scroll {
    overflow: hidden;
    margin-right: 15px; 
    //hides scrollbar without moving the body over
}

谢谢!

Answer 1

如果您将正文的 css 属性 overflow 设置为 hidden，这应该会阻止用户滚动正文。

function disableScroll() {
    document.body.style.overflow = "hidden";
}
function enableScroll() {
    document.body.style.overflow = "";
}