上一篇: jquery实现数字变化效果下一篇:jQuery层级选择器

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

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery---鼠标滚轮控制div横向滚动条左右移动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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) 
        }
    }
})