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(双击) ...
随机推荐
- bzoj1688 疾病管理
Description Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D) is running through the fa ...
- RedHat6.2离线安装vncserver
准备安装包 tigervnc-server-1.1.0-5.el6_4.1.x86_64.rpm pixman-0.32.8-1.el6.x86_64.rpm pixman-devel-0.32.8- ...
- AtCoder Regular Contest 084 C - Snuke Festival【二分】
C - Snuke Festival ....最后想到了,可是不应该枚举a[],这样要二重循环,而应该枚举b[],这样只需一重循环... #include<iostream> #inclu ...
- 开窗函数over()中partition by关键字解析
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- typeof操作符,返回数据类型Array.isArray()、Object.prototype.toString.call()
源地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof typeof操作符 // N ...
- Mac OS X 常用快捷键一览
- 薪资管理系统(Java面向对象思想)
package com.test3; import java.util.*; import java.io.*; /** * @author qingfeng * 重要思想:面向对象思想(添加员工管理 ...
- 2018-2-13-WPF-只允许打开一个实例
title author date CreateTime categories WPF 只允许打开一个实例 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:2 ...
- bzoj 4386: [POI2015]Wycieczki
bzoj 4386: [POI2015]Wycieczki 这题什么素质,爆long long就算了,连int128都爆……最后还是用long double卡过的……而且可能是我本身自带大常数吧,T了 ...
- javascript 元素的大小
1.偏移量 元素的可见大小由其高度.宽度决定,包括所有内边距.滚动条和边框大小(不包含外边距).通过下列4个属性可以获取元素的偏移量: offsetHeight: offsetWidth: offse ...