jQuery 或 Javascript - 如何在不溢出的情况下禁用窗口滚动:隐藏;

IT技术 javascript jquery css scroll
2021-03-18 17:31:21

嗨,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/

6个回答

尝试在除一个节点之外的所有节点上处理“鼠标滚轮”事件

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

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

不,这会阻止所有元素滚动,我希望能够滚动元素,我已经结束了
2021-05-04 17:31:21
此块仅在 id elementid 的元素上滚动。证明:jsfiddle.net/DHz77
2021-05-07 17:31:21
@tomericco DOMMouseScroll 事件已弃用。也许您使用的是旧版本的Firefox?参考:developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
2021-05-13 17:31:21
这在 Firefox 中不起作用。为了使其在 FF 中工作,您应该收听 'DOMMouseScroll' 事件,
2021-05-14 17:31:21
好像我第一次听错了你的问题。我已经更新了答案。
2021-05-21 17:31:21

如果你想滚动你结束的元素并阻止窗口滚动,这里有一个非常有用的功能:

$('.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();
    }
});

将“Scrollable”类应用于您的元素,就是这样!

@vsync - 此代码不是为了禁用滚动,它只是为了防止当您的鼠标悬停在特定元素上时窗口滚动:当您到达滚动的末尾时,它将开始滚动窗口(这就是此代码所阻止的)。如果您通过拖动滚动条来滚动,则不会发生这种情况。
2021-05-16 17:31:21

遵循格伦斯的想法,这里有另一种可能性。它允许您在 div 内滚动,但会在 div 滚动结束时阻止主体随它滚动。然而,如果你滚动太多,它似乎积累了太多的 preventDefault,然后如果你想向上滚动它会产生滞后。有没有人有建议来解决这个问题?

    $(".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 移动功能正常工作。

不,这会阻止所有元素滚动,我希望能够滚动元素,我已经结束了
2021-05-02 17:31:21

没有外部变量:

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