关于如何用Jquery监听鼠标滚轮改变横向滚动条

$(function() {
    // 设置每次滚动长度,单位 px
    var scroll_width = 100;
    var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll";
    $("body").on(scroll_events, function(e) {
        var delta = e.originalEvent.wheelDelta
        console.log(delta);
        var detail= e.originalEvent.detail;
        // 滑轮向下滚动,滚动条向右移动,scrollleft+
        if(!detail){
            this.scrollLeft-= (delta);
        }else{
            if(detail>0){
                $("html").scrollLeft($("html").scrollLeft() + scroll_width);
            }
            // 滑轮向上滚动,滚动条向座移动,scrollleft-
            else{
                $("html").scrollLeft($("html").scrollLeft() - scroll_width);
            }
        }
    });
});

目前来说是最简洁的了!

时间: 2024-08-06 11:57:55

关于如何用Jquery监听鼠标滚轮改变横向滚动条的相关文章

监听鼠标滚轮(js+jq),xp系统下也OK

应项目需求,运用了监听滚轮的事件,发现在xp系统下使用jquery的mousewheel.js来做,会导致无论滚轮怎么滚,都只能向下滚...后面使用了原生js的,就可以了. jquery: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

百度地图api提供的获取地图缩放级别的方法比较单一,就一个getZoom()方法,这个方法能够获取一次地图缩放级别,后面随着鼠标滚轮的滚动,地图缩放级别被改变,就无法再获取地图缩放级别了,具体api参考:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B8%E5%BF%83%E7%B1%BB/map 如题,若想实时获取地图的缩放级别,小博主是这样做的,

Linux文本模式下监听鼠标事件

Linux文本模式下监听鼠标事件,这里是通过gpm这个来实现的,代码如下: 1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <unistd.h> 4 #include <gpm.h> 5 6 void main(int argc,char **argv) 7 { 8 fd_set readset; 9 Gpm_Event event; 10 Gpm_Connect conn; 11 12 conn.

Python监听鼠标键盘事件

# -*- coding: utf-8 -*- __author__ = 'P00113' # coding: utf-8 import pythoncom import pyHook import win32api import win32con import time import threading import random VK_CODE = { 'backspace': 0x08, 'tab': 0x09, 'clear': 0x0C, 'enter': 0x0D, 'shift':

jquery 监听所有锚点链接实现平滑移动

jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash);

不浮夸且不单调——监听鼠标图片移动动画

鼠标监听实现图片动画 这是一个小的动画,监听鼠标的移动,来实现 图片的移动视觉特效.虽然功能不是那么的强大,但应用范围还是很广泛的,不浮夸且不是单调. 先给大家欣赏一下样式. 小样子 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标移动图片</title> <style> body { margin: 0; backgr

监听元素属性改变事件的方法

一.onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效.(就是说你在输入框中输入完内容,输入完了,然后鼠标点别的地方触发该事件)二.oninput事件oninput 事件在用户输入时触发.不支持JS等赋值改变的元素属性.该事件在 <input> 或 <textarea> 元素的值发生改变时触发.(也就是说,不用输入完,边输入边触发该事件)①但是,这个方法是HTML5中的标准事件,IE9以下的浏览器是不支持oninput事件的.②使用时,还需要oni

iOS开发:使用代理模式监听开关状态改变事件

记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell里显示的内容由数据模型SettingItem提供:在SettingCell里定义一个属性即可. @property (nonatomic, strong) SettingItem *item; 再定义几个SettingItem的子类表示显示不同内容的Cell(如图1).由于所有开关状态的归档和解档都

jquery监听input元素输入

一般我们监听input内容的变化都是通过onchange()事件来绑定,但这个做法有一个缺陷就是只有当正在被输入的input元素失去焦点时(即鼠标点击了别处)才会触发,而实际上我们往往希望能够满足在用户输入过程中,在保持焦点不变的情况下随着输入内容的变化而触发一定事件处理函数(这样就不用劳烦用户用鼠标再点击以下别的地方). 这种应用场景可以使用jquery的绑定技术 eg. $("#gamount").bind('input propertychange',function(){