插件 jQuery.mousewheel 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.mousewheel 中文API文档 https://github.com/jquery/jquery-mousewheel

jQuery Mouse Wheel Plugin

A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.

Note: There is a bug in Safari 9 that prevents the plugin from working properly. See this comment for some possible workarounds, and watch this Webkit ticket to find out if and when Apple will fix it.

In order to use the plugin, simply bind the mousewheel event to an element.

It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery.

The event object is updated with the normalized deltaX and deltaY properties. In addition there is a new property on the event object called deltaFactor. Multiply the deltaFactor by deltaX or deltaY to get the scroll distance that the browser has reported.

Here is an example of using both the bind and helper method syntax:

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

The old behavior of adding three arguments (delta, deltaX, and deltaY) to the event handler is now deprecated and will be removed in later releases.

The Deltas…

The combination of Browsers, Operating Systems, and Devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users here.

Getting the scroll distance

In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX or deltaY event property to find the scroll distance the browser reported.

The deltaFactor property was added to the event object in 3.1.5 so that the actual reported delta value can be extracted. This is a non-standard property.

Using with Browserify

Support for browserify is baked in.

npm install jquery-mousewheel
npm install jquery-browserify

In your server-side node.js code:

var express = require('express');
var app = express.createServer();

app.use(require('browserify')({
    require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));

In your browser-side javascript:

var $ = require('jquery-browserify');
require('jquery-mousewheel')($);

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>