码

Question

获得了overflow:hidden的elemnt和鼠标滚轮上的事件监视器..但是上下滚动时没有任何反应

码

$( '.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。尝试在你的wheelhandler之前添加$.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);
}

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

码

2 个答案: