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的效果
测试效果
jQuery---鼠标滚轮控制div横向滚动条左右移动的更多相关文章
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- Pycharm用鼠标滚轮控制字体大小的
Pycharm用鼠标滚轮控制字体大小的 一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...
- (转)Pycharm用鼠标滚轮控制字体大小
转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- jQuery 鼠标滚轮插件应用 mousewheel
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. ...
- jQuery 鼠标滚轮插件 jquery.mousewheel.js
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...
- Jquery使两个Div的滚动条同步滚动
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...
- Pycharm用Ctrl+鼠标滚轮控制字体大小
一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...
- Pycharm用鼠标滚轮控制字体大小
一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...
随机推荐
- Effective Modern C++:04智能指针
裸指针有着诸多缺点:裸指针的声明中看不出它指向的是单个对象还是数组:裸指针的声明中也无法看出使用完它指向的对象后是否需要删除,也就是声明中看不出裸指针是否拥有其指向的对象:即使知道要析构裸指针指向的对 ...
- 替换^M字符
关于回车与换行 很久以前,老式的电传打字机使用两个字符来另起新行.一个字符把滑动架移回首位 (称为回车,ASCII码为0D),另一个字符把纸上移一行 (称为换行,ASCII码为0A).当计算机问世以后 ...
- laravel 极验(Geetest) 让验证更安全。
整理的有些仓促,在9月15号之后会更新更加详细更加全面的文档,供给大家参考,学习! 1.简述 在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识 ...
- docker search
命令:docker search [root@iZ943kh74qgZ ~]# docker search --help Usage: docker search [OPTIONS] TERM Sea ...
- ELK4之进阶学习
1.精确查找和模糊查找(term和match的区别) match经过分析(analyer)的, term是不经过分词,直接去倒排索引中查找精确的值. 2.建议器的简介(最左前缀或者自带的做) (1)直 ...
- 笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 (2019-06-09)
笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 原因 为了和服务器一样的运行环境. 使用 Ubuntu 运行 Odoo 运行更快. 方便使用 Windows 10 ...
- 微信小程序中支持es7的async语法
最近在原生的微信小程序项目中需要把原来es6的promise方法改成es7的async await,这样代码看起来更直观,也方便以后的兄弟维护,但是改了代码之后项目就报错了. 提示的错误是:regen ...
- 【NS2】NS2中802.11代码深入理解—packet传输的流程(转载)
如何传送一个封包(How to transmit a packet?)首先,我们要看的第一个function是在mac-802_11.cc内的recv( ),程式会先判断目前呼叫recv( )这个pa ...
- C-链表实现,保存文件,评估-单项选择题系统课程设计---ShinePans
课程设计 单项选择题标准化考试系 所属专业:软件project软件三班 完毕人:潘尚 一.设计计划. 1.能够用菜单明白的指导用户操作. 2.操作完毕能够返回主菜单. 3.将输入的题目保存至C盘的 ...
- C# 从零开始写 SharpDx 应用 画三角
原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...