jQuery或Javascript - 如何禁用窗口滚动而不溢出:隐藏;

Question

嗨是否可以在不使用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/

Answer 1

尝试在除一个节点之外的所有节点上处理'mousewheel'事件

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

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

Answer 2

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

$('.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"类应用于您的元素,就是这样!