码迷,mamicode.com
首页 > 移动开发 > 详细

jQuery---鼠标滚轮控制div横向滚动条左右移动

时间:2019-06-11 19:34:02      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:idt   span   html   order   jquer   关联   over   不能   query   

 HTML

<div class="table-responsive">
    <div class="fhtable" style="width:2000px"></div>
</div>

JavaScript

//鼠标滚轮控制div左右移动
$(".fhtable").each(function(index,element) {
    element.onwheel = function(event){
        var table = $(element).parents(".table-responsive");
        var right = $(element).width()-table[0].offsetWidth;
        if (table.scrollLeft()<right&&event.deltaY>0) {
            //禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)  
            event.preventDefault(); 
            var left = (table.scrollLeft() + 50);
            table.scrollLeft(left) 
        }
        if (table.scrollLeft()>0&&event.deltaY<0) {
            //禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)  
            event.preventDefault(); 
            var left = (table.scrollLeft() - 50);
            table.scrollLeft(left) 
        }
    }
})

 这里不能上传JavaScript代码,所以只能显示HTML的效果

测试效果

jQuery---鼠标滚轮控制div横向滚动条左右移动

标签:idt   span   html   order   jquer   关联   over   不能   query   

原文地址:https://www.cnblogs.com/appskyy/p/11005398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!