JGUI实现抽屉组件鼠标中键滚动

mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.originalEvent.wheelDelta) { /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
    } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
    }
    console.log(delta);
    if (delta)
        handle(delta);
    if (event.preventDefault)
        event.preventDefault();
    event.returnValue = false;
});
var handle = function (delta) {
    var random_num = Math.floor((Math.random() * 100) + 50);
    var step = $('.jgui-accordion').height();            //可视区高度
    var cur_top = $('.jgui-accordion').scrollTop();    //当前滚过的高度
    var direction = delta > 0 ? -1 : 1;
    var height = direction * step + cur_top;
    var x_height = Math.floor(height / step) * step;    //滚过整数倍的可视区大小
    $(".jgui-accordion").stop().animate({ scrollTop: x_height }, 300);
}
// 判断浏览器类型
function getBrowserInfo() {
    var OsObject = "";
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        return "MSIE";
    }
    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
        return "Firefox";
    }
    if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
        return "Safari";
    }
    if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
        return "Camino";
    }
    if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
        return "Gecko";
    }

}  

如此,鼠标在该区域内时,滚动鼠标中键时,就可以实现滚动了,支持火狐等浏览器。后面将封装滚动部分代码。

猜你喜欢

转载自www.cnblogs.com/zhaogaojian/p/10421950.html