1

マウスホイールの要素とイベントリスナーを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;
}
4

2 に答える 2

3

のよう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、イベント ハンドラの 2 番目を使用してホイールを取得するのが適切な方法であることに注意してくださいdelta...

于 2013-06-11T12:17:30.240 に答える
1

このクロスブラウザの例はあなたを助けることができます:

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);
}
于 2013-06-11T12:33:38.110 に答える