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横向滚动条左右移动的更多相关文章

  1. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  2. Pycharm用鼠标滚轮控制字体大小的

    Pycharm用鼠标滚轮控制字体大小的   一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...

  3. (转)Pycharm用鼠标滚轮控制字体大小

    转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...

  4. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  5. jQuery 鼠标滚轮插件应用 mousewheel

    jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. ...

  6. jQuery 鼠标滚轮插件 jquery.mousewheel.js

    jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...

  7. Jquery使两个Div的滚动条同步滚动

    $("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...

  8. Pycharm用Ctrl+鼠标滚轮控制字体大小

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

  9. Pycharm用鼠标滚轮控制字体大小

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

随机推荐

  1. nginx简单使用

    nginx开启./nginx重启./nginx -s reload关闭./nginx -s stop或quit

  2. codevs1839 洞穴勘测

    题目描述 Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道 ...

  3. 容器云平台使用体验:DaoCloud

    容器技术风起云涌,在国内也涌现出了很多容器技术创业公司,本文介绍容器厂商DaoCloud提供的容器云平台,通过使用容器云平台,可以让大家更加了解容器,并可以学习不同容器云平台的优势. 1.       ...

  4. IDEA切换git分支

    查看当前所在分支 场景:在多人开发中,需要在主分支的基础上创建一些分支分配给小团队或个人去开发,然后小分支上的小功能开发完毕之后,再merge(合并)到主分支. 1.查看当前所在的分支 下图1.1中是 ...

  5. thinkphp5.0 模板包含文件

    在index.html里包含layout.html:{include file=“layout”}它这里是以绝对路径查找所包含的文件,默认是view目录下 在这种情况下,要在在index.html里包 ...

  6. sqlite数据库文件导入到sqlserver 2016-03-26 21:55 1292人阅读 评论(1) 收藏

    最近在公司做项目,需要做两个版本,都是cs的,然后要求是一个单机版,自带数据库,另一个要进行局域网内的连接,所以公司的大牛设计是,局域网版的用sqlserver2008,单机版的则用sqlite.然后 ...

  7. MaxCompute 费用暴涨之新增SQL分区裁剪失败

    现象:因业务需求新增了SQL任务,这SQL扫描的表为分区表,且SQL条件里表只指定了一个分区,按指定的分区来看数据量并不大,但是SQL的费用非常高.费用比预想的结果相差几倍甚至10倍以上. 若只知道总 ...

  8. python内置函数and匿名函数

    一.内置函数 什什么是内置函数? 就是python给你提供的. 拿来直接⽤用的函数, 比如print., input等等. 截⽌止 到python版本3.6.2 python⼀一共提供了了68个内置函 ...

  9. Python 变量赋值

  10. ListOfOpenSourcePrograms

    ListOfOpenSourcePrograms Contents Desktop Applications Communication Engineering Educational Financi ...