首页 > 其他 > 详细

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

时间:2019-02-23 11:40:40      阅读:181      评论:0      收藏:0      [点我收藏+]
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";
    }

}  

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

技术分享图片

 

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

原文:https://www.cnblogs.com/zhaogaojian/p/10421950.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!