backstrap/jquery-mousewheel

一个添加跨浏览器鼠标滚轮支持的jQuery插件。

安装: 399

依赖: 0

建议: 0

安全: 0

星级: 0

关注者: 3

分叉: 1 691

语言:JavaScript

类型:组件

dev-master 2016-04-20 23:41 UTC

This package is not auto-updated.

Last update: 2024-09-26 00:19:42 UTC


README

一个添加跨浏览器鼠标滚轮支持并具有delta归一化的jQuery插件。

注意:Safari 9中存在一个bug,阻止插件正常工作。请参阅此评论了解一些可能的解决方案,并关注此Webkit问题跟踪以了解苹果何时修复它。

要使用此插件,只需将 mousewheel 事件绑定到元素上。

它还提供了两个名为 mousewheelunmousewheel 的辅助方法,其行为与jQuery中的其他事件辅助方法类似。

事件对象将更新为归一化的 deltaXdeltaY 属性。此外,事件对象上还有一个新属性称为 deltaFactor。将 deltaFactordeltaXdeltaY 相乘,即可获得浏览器报告的滚动距离。

以下是一个使用绑定和辅助方法语法的示例

// 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);
});

将三个参数(deltadeltaXdeltaY)添加到事件处理器的旧行为现在已弃用,并将在未来版本中删除。

Delta...

浏览器、操作系统和设备的组合提供了大量可能的delta值。实际上,如果用户先使用触摸板然后使用物理鼠标滚轮,delta值可能会有很大差异。此插件归一化这些值,使您从+-1开始获得整数,并根据使用的力量或加速度以+-1的增量增加。这个数字根据设备可能达到数千。请查看从用户收集的一些数据此处

获取滚动距离

在某些用例中,我们更喜欢使用归一化的delta,而在其他用例中,我们希望知道浏览器应根据用户输入滚动多远。这可以通过将 deltaFactordeltaXdeltaY 事件属性相乘来完成,以找到浏览器报告的滚动距离。

deltaFactor 属性是在3.1.5版本中添加到事件对象的,以便提取实际报告的delta值。这是一个非标准属性。

Browserify 一起使用

已内置对browserify的支持。

npm install jquery-mousewheel
npm install jquery-browserify

在您的服务器端node.js代码中

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

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

在您的浏览器端javascript中

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