前端优化-滚轮事件

1.滚轮相关事件

事件类型事件对象是否标准化兼容性
mousewheelMouseWheelEvent非标准化只有Firefox不支持
DOMMouseScrollMouseScrollEvent非标准化只有Firefox支持
wheelWheelEventDOM Level 3Firefox 17+/ie9+

wheel事件详细内容:wheel事件

2.通用滚轮事件(wheel)

浏览器类型evt.wheelDeltaevt.detail
Safari v5/Win71200
Safari v5/OS X1200
Safari v7/OS X120
Chrome v11/Win71200
Chrome v37/Win71200
Chrome v11/OS X3(!)0(possibly wrong)
Chrome v37/OS X1200
IE9/Win7120undefined
Opera v11/OS X40-1
Opera v24/OS X1200
Opera v11/Win7120-3
Firefox v4/Win7undefined-3
Firefox v4/OS Xundefined-1
Firefox v30/OS Xundefined-1
'use strict';

var UserAgent_DEPRECATED = require('UserAgent_DEPRECATED');
var isEventSupported = require('isEventSupported');


// Reasonable defaults
var PIXEL_STEP  = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;

function normalizeWheel(event)  {
	var sX = 0, sY = 0,       // spinX, spinY
  		pX = 0, pY = 0;       // pixelX, pixelY

	// Legacy
	if ('detail'      in event) { sY = event.detail; }
 	if ('wheelDelta'  in event) { sY = -event.wheelDelta / 120; }
	if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
	if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }

	// side scrolling on FF with DOMMouseScroll
	if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
		sX = sY;
		sY = 0;
	}

	pX = sX * PIXEL_STEP;
	pY = sY * PIXEL_STEP;

	if ('deltaY' in event) { pY = event.deltaY; }
	if ('deltaX' in event) { pX = event.deltaX; }

	if ((pX || pY) && event.deltaMode) {
		if (event.deltaMode == 1) {          // delta in LINE units
  			pX *= LINE_HEIGHT;
  			pY *= LINE_HEIGHT;
		} else {                             // delta in PAGE units
  			pX *= PAGE_HEIGHT;
  			pY *= PAGE_HEIGHT;
		}
	}

	// Fall-back if spin cannot be determined
	if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
	if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }

	return { spinX  : sX,
       		 spinY  : sY,
       		 pixelX : pX,
       		 pixelY : pY };
}

/*spinX + spinY标准化的最佳组合。 它支持旧的DOMMouseScroll for Firefox,因为FF不包含带有'wheel'事件的wheelDelta,因此无法确定旋转速度。*/
normalizeWheel.getEventType = function() /*string*/ {
	return (UserAgent_DEPRECATED.firefox())
       	? 'DOMMouseScroll'
       	: (isEventSupported('wheel'))
           	? 'wheel'
           	: 'mousewheel';
};

module.exports = normalizeWheel;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值