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(双击) ...
随机推荐
- 基于jQuery的自定义滚动条
在线演示 本地下载
- SDUT-3375_数据结构实验之查找三:树的种类统计
数据结构实验之查找三:树的种类统计 Time Limit: 400 ms Memory Limit: 65536 KiB Problem Description 随着卫星成像技术的应用,自然资源研究机 ...
- C++简单读取 & 写入实例
#include <fstream> #include <iostream> using namespace std; int main () { ]; // 以写模式打开文件 ...
- app被Rejected 的各种原因翻译。这个绝对有用
1. Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound b ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第七章:在Direct3D中绘制(二)
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第七章:在Direct3D中绘制(二) 代码工程地址: https:/ ...
- jq 获取内容
1.html()-设置或者返回被选元素的内容(包括html标记) $(selector).html() 2.text()-设置或者返回被选元素的内容 $(selector).text() 3.val( ...
- @hdu - 6687@ Rikka with Stable Marriage
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个稳定婚姻匹配问题,其中第 i 个男生与第 j 个女生之间 ...
- C# 显示实现接口
显示实现接口的目的就是为了同名方法. 接口是多实现的,比如说一个方法要实现多个接口,然后这几个接口中有同名方法,这个时候就用到了接口的显示实现. 显示实现接口 成员方法的调用: 接口名.方法名 访问 ...
- SharpDX初学者教程第4部分:绘制三角形
原文 http://www.johanfalk.eu/blog/sharpdx-beginners-tutorial-part-4-drawing-a-triangle 现在我们有了一个Direct3 ...
- 01docker简单使用和配置(容器、镜像)
一:容器中运行简单应用程序 1:hello world 使用docker可以在容器中运行应用程序,使用docker run命令即可.比如下面的命令: $ docker run ubuntu /bin ...