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. 运行docker容器镜像2(指定容器启动时启动的脚本)

    docker中启动容器有以下两种情况. 第一种是通过 # docker run containerid 启动一个容器. 第二种是重新启动已经关闭的容器. # docker start containe ...

  2. 在linux里如何建立一个快捷方式,连接到另一个目录

    用软链接 用法:ln -s 源目录 目标快捷方式, 比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是 ln -s /home/LXBC   /etc/LXBC ...

  3. 生成主键ID,唯一键id,分布式ID生成器雪花算法代码实现

    工具类:  package com.ihrm.common.utils; import java.lang.management.ManagementFactory; import java.net. ...

  4. 寒哥教你学iOS - 经验漫谈

    http://www.jianshu.com/p/cb54054d3add 寒哥教你学iOS - 经验漫谈 字数2848 阅读1896 评论19 喜欢43 顺便来个广告 iOS开发者 群1734993 ...

  5. 给图片加ALT属性是个什么意思?有什么优点呢

    使用百度统计的seo建议当中一条图片ALT信息"存在没有alt信息的img标签"扣分较多.站点图片中加入ALT对seo有什么优点呢?这是非常多初学seo的朋友们都须要询问的问题.a ...

  6. 控制台输入聊天记录 输出到文件中保存 Day20

    package com.sxt.io; /* 字节流转换成字符流(转换流) * InputStreamReader extends Reader * OutputStreamWriter extend ...

  7. Linux Mint 19.1 安装 Docker 过程笔记

    Linux Mint 19.1 安装 Docker 过程笔记 参考了很多教程,可能有很多教程已经过时. 综合记录一下. 首先修改一下系统的源,使用国内的源. 然后安装 docker sudo apt ...

  8. Java练习 SDUT-1131_最大公约数与最小公倍数

    C/C++训练1---最大公约数与最小公倍数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入两个正整数,求它们的最 ...

  9. Java版各种排序算法 (冒泡,快速,选择,插入)

    package com.test4; import java.util.*; //Calendar 显示时间 /** * @author qingfeng * 功能:排序算法 */ public cl ...

  10. Oracle包utl_inaddr

    作用:用于取得局域网或Internet环境中的主机名和IP地址. 1.utl_inaddr.get_host_address 环境中IP地址 如果查询失败,则提示系统错误 查询www.qq.com的I ...