jquery - 鼠标滚轮和溢出隐藏不起作用

Question

在鼠标滚轮上有一个元素overflow:hidden和一个事件监听器..但是上下滚动时没有任何反应

http://jsfiddle.net/XNwbt/299/

代码

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ){
    var delta = e.wheelDelta || -e.detail;
    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    return false;
});

.scrollable {
    margin:10px;
    padding:10px;
    width:200px;
    height:100px;
    background:yellow;
    overflow:hidden;
}

Answer 1

似乎delta是NaN。尝试$.event.props.push('wheelDelta');在您的车轮处理程序之前添加。

$.event.props.push('wheelDelta');
$('.scrollable').on('mousewheel DOMMouseScroll', function (e){
    var delta = e.wheelDelta || -e.detail;
    this.scrollTop += (delta < 0 ? 1 : -1) * 30;
    return false;
});

http://fiddle.jshell.net/XNwbt/301/

但是，我真的推荐使用 Brandons mousewheel -plugin！

http://fiddle.jshell.net/XNwbt/302/

请注意，在使用 Brandons 插件期间，正确的方法是使用parameter事件处理程序中的第二个，以获取轮delta...

Answer 2

这个跨浏览器示例可以帮助您：

if (elem.addEventListener) {
    if ('onwheel' in document) {
        // IE9+, FF17+
        elem.addEventListener ("wheel", onWheel, false);
    } else if ('onmousewheel' in document) {
        // legacy
        elem.addEventListener ("mousewheel", onWheel, false);
    } else {
        // 3.5 <= Firefox < 17
        elem.addEventListener ("MozMousePixelScroll", onWheel, false);
    }
} else { // IE<9
    elem.attachEvent ("onmousewheel", onWheel);
}

function onWheel(e) {
  e = e || window.event;
    // wheelDelta doesn't get pixels count
    var delta = e.deltaY || e.detail || e.wheelDelta;
    var info = document.getElementById('delta');
    info.innerHTML = +info.innerHTML + delta;
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}