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. Effective Modern C++:04智能指针

    裸指针有着诸多缺点:裸指针的声明中看不出它指向的是单个对象还是数组:裸指针的声明中也无法看出使用完它指向的对象后是否需要删除,也就是声明中看不出裸指针是否拥有其指向的对象:即使知道要析构裸指针指向的对 ...

  2. 替换^M字符

    关于回车与换行 很久以前,老式的电传打字机使用两个字符来另起新行.一个字符把滑动架移回首位 (称为回车,ASCII码为0D),另一个字符把纸上移一行 (称为换行,ASCII码为0A).当计算机问世以后 ...

  3. laravel 极验(Geetest) 让验证更安全。

    整理的有些仓促,在9月15号之后会更新更加详细更加全面的文档,供给大家参考,学习! 1.简述 在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识 ...

  4. docker search

    命令:docker search [root@iZ943kh74qgZ ~]# docker search --help Usage: docker search [OPTIONS] TERM Sea ...

  5. ELK4之进阶学习

    1.精确查找和模糊查找(term和match的区别) match经过分析(analyer)的, term是不经过分词,直接去倒排索引中查找精确的值. 2.建议器的简介(最左前缀或者自带的做) (1)直 ...

  6. 笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 (2019-06-09)

    笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 原因 为了和服务器一样的运行环境. 使用 Ubuntu 运行 Odoo 运行更快. 方便使用 Windows 10 ...

  7. 微信小程序中支持es7的async语法

    最近在原生的微信小程序项目中需要把原来es6的promise方法改成es7的async await,这样代码看起来更直观,也方便以后的兄弟维护,但是改了代码之后项目就报错了. 提示的错误是:regen ...

  8. 【NS2】NS2中802.11代码深入理解—packet传输的流程(转载)

    如何传送一个封包(How to transmit a packet?)首先,我们要看的第一个function是在mac-802_11.cc内的recv( ),程式会先判断目前呼叫recv( )这个pa ...

  9. C-链表实现,保存文件,评估-单项选择题系统课程设计---ShinePans

    课程设计   单项选择题标准化考试系 所属专业:软件project软件三班 完毕人:潘尚 一.设计计划. 1.能够用菜单明白的指导用户操作. 2.操作完毕能够返回主菜单. 3.将输入的题目保存至C盘的 ...

  10. C# 从零开始写 SharpDx 应用 画三角

    原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...