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. Directx教程(25) 简单的光照模型(4)

    原文:Directx教程(25) 简单的光照模型(4)      在本篇日志中,我们尝试用不带衰减的点光源来计算漫反射颜色.     前面的三个工程,我们都用的是方向光源(directional li ...

  2. More Effective C++: 05技术(29)

    29:引用计数 本章首先实现一个带引用计数String,然后逐步优化,介绍引用计数的常规实现. 实现引用计数的String,首先需要考虑:引用计数在哪存储.这个地方不能在String对象内部,因为需要 ...

  3. @codeforces - 715E@ Complete the Permutations

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两个排列 p, q,他们中的有些位置被替换成了 0. 两个排 ...

  4. Linux下的python安装

    centos7安装python3 以及tab补全功能   1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/ ...

  5. @codeforces - 1161F@ Zigzag Game

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 2n 个结点的完全二分图,1~n 在左边,n+1~2n ...

  6. 二分查找 Day08

    package com.sxt.arraytest2; /* * 二分查找 前提:有序 */ public class TestBinarySearch { public static void ma ...

  7. notepad++最有用的快捷键

    Ctrl+Tab  实现在多个打开的窗口间切换 Ctrl+Shift+Q 区块注释 Ctrl+K  行注释 Tab 缩进 Shift+Tab 删除缩进 先按住键盘上的“ctrl”键不放,然后滚动鼠标的 ...

  8. oracle函数 INITCAP(c1)

    [功能]返回字符串并将字符串的第一个字母变为大写,其它字母小写; [参数]c1字符型表达式 [返回]字符型 [示例] SQL> select initcap('smith abc aBC') u ...

  9. @bzoj - 4377@ [POI2015] Kurs szybkiego czytania

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 n, a, b, p,其中 n, a 互质.定义一个长度为 ...

  10. Android 使用SystemBarTint设置状态栏颜色

    做项目时,发现APP的状态栏是系统默认的颜色,突然想到,为啥别的APP是自己设置的颜色(和APP本身很相搭),于是也想给自己的APP设置系统状态栏的颜色,更加美美哒... 搜了下,发现原来设置状态栏居 ...