jQuery 或 Javascript - 如何禁用窗口滚动而不使用 overflow:hidden;.

jQuery or Javascript - how to disable window scroll without overflow:hidden;

本文关键字：overflow hidden 滚动 Javascript 窗口 何禁用 jQuery      更新时间：2023-09-26

嗨，当我悬停在元素上时，是否可以在不使用overflow:hidden;的情况下禁用窗口滚动？

我试过了：

$('.chat-content').on('mouseenter',function(){
    $(document).scroll(function(e){
        if(!$(e).hasClass('.chat-content'))
        e.stopPropagation();
        e.preventDefault();
    });
});
我

的意思是，我想让滚动条保持可见，但是当我用鼠标滚动出元素时，窗口不会滚动，而我上面的元素可以滚动

所以禁用正文的滚动，但不禁用元素的滚动，我在不使用 css 的情况下结束了

这是我做的另一个尝试：http://jsfiddle.net/SHwGL/

尝试在所有节点上处理"鼠标滚轮"事件，除了一个节点

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

演示：http://jsfiddle.net/DHz77/1/

如果你想滚动你所在的元素并阻止窗口滚动，这里有一个非常有用的函数：

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;
    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }
    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

将类"可滚动"应用于您的元素，仅此而已！

遵循格伦斯的想法，这是另一种可能性。它将允许您在div 内滚动，但会在div 滚动结束时阻止正文随之滚动。但是，如果滚动太多，它似乎会积累太多的预防，然后如果要向上滚动，则会产生滞后。有人有解决这个问题的建议吗？

    $(".scrollInsideThisDiv").bind("mouseover",function(){
       var bodyTop = document.body.scrollTop;
       $('body').on({
           'mousewheel': function(e) {
           if (document.body.scrollTop == bodyTop) return;
           e.preventDefault();
           e.stopPropagation();
           }
       });
    });
    $(".scrollInsideThisDiv").bind("mouseleave",function(){
          $('body').unbind("mousewheel");
    });

tfe 在 StackOverflow 的另一篇文章中回答了这个问题：

另一种方法是使用：

$(document).bind("touchmove",function(event){
  event.preventDefault();
});

但它可能会阻止某些jquery移动功能正常工作。

没有外部变量：

       $('.element').bind('mousewheel', function(e, d) {
            if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
                || (this.scrollTop === 0 && d > 0)) {
                e.preventDefault();
            }
        });
CSS '

fixed' solution（如 Facebook 所做的）：

body_temp = $("<div class='body_temp' />")
    .append($('body').contents())
    .css('position', 'fixed')
    .css('top', "-" + scrolltop + 'px')
    .width($(window).width())
    .appendTo('body');

要切换到正常状态：

var scrolltop = Math.abs($('.body_temp').position().top);
$('body').append($('.body_temp').contents()).scrollTop(scrolltop);

这个线程上有很多好主意。 我的页面中有很多弹出窗口用于处理用户输入。 我使用的，是禁用鼠标滚轮和隐藏滚动条的组合：

this.disableScrollFn= function(e) { 
    e.preventDefault(); e.stopPropagation() 
};
document.body.style.overflow = 'hidden';
$('body').on('mousewheel', this.disableScrollFn);

这样做的好处是我们阻止用户以任何可能的方式滚动，而不必更改 css 位置和顶部属性。 我对触摸事件不感兴趣，因为触摸外部会关闭弹出窗口。

要禁用此功能，请在关闭弹出窗口时执行以下操作。

document.body.style.overflow = 'auto';
$('body').off('mousewheel', this.disableScrollFn);

请注意，我在现有对象（在我的例子中是 PopupViewModel）上存储了对我的 disableScrollFn 的引用，因为它会在关闭弹出窗口以访问 disableScrollFn 时触发。

你可以使用 jquery-disablescroll 来解决这个问题：

  • 禁用滚动：$window.disablescroll();
  • 再次启用滚动：$window.disablescroll("undo");

支持handleWheel、handleScrollbar、handleKeys和scrollEventKeys。

相关文章：