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

 這里不能上傳JavaScript代碼,所以只能顯示HTML的效果

測試效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM