You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

mousewheel.js 6.1 KiB

4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. * @Describe: 鼠标滚动监听事件
  3. */
  4. (function ($) {
  5. var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
  6. toBind = ('onwheel' in document || document.documentMode >= 9) ?
  7. ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
  8. slice = Array.prototype.slice,
  9. nullLowestDeltaTimeout, lowestDelta;
  10. if ($.event.fixHooks) {
  11. for (var i = toFix.length; i;) {
  12. $.event.fixHooks[toFix[--i]] = $.event.mouseHooks;
  13. }
  14. }
  15. var special = $.event.special.mousewheel = {
  16. setup: function () {
  17. if (this.addEventListener) {
  18. for (var i = toBind.length; i;) {
  19. this.addEventListener(toBind[--i], handler, false);
  20. }
  21. } else {
  22. this.onmousewheel = handler;
  23. }
  24. // Store the line height and page height for this particular element
  25. $.data(this, 'mousewheel-line-height', special.getLineHeight(this));
  26. $.data(this, 'mousewheel-page-height', special.getPageHeight(this));
  27. },
  28. teardown: function () {
  29. if (this.removeEventListener) {
  30. for (var i = toBind.length; i;) {
  31. this.removeEventListener(toBind[--i], handler, false);
  32. }
  33. } else {
  34. this.onmousewheel = null;
  35. }
  36. },
  37. getLineHeight: function (elem) {
  38. return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
  39. },
  40. getPageHeight: function (elem) {
  41. return $(elem).height();
  42. },
  43. settings: {
  44. adjustOldDeltas: true
  45. }
  46. };
  47. $.fn.extend({
  48. mousewheel: function (fn) {
  49. return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
  50. },
  51. unmousewheel: function (fn) {
  52. return this.unbind('mousewheel', fn);
  53. }
  54. });
  55. function handler(event) {
  56. var orgEvent = event || window.event,
  57. args = slice.call(arguments, 1),
  58. delta = 0,
  59. deltaX = 0,
  60. deltaY = 0,
  61. absDelta = 0;
  62. event = $.event.fix(orgEvent);
  63. event.type = 'mousewheel';
  64. // Old school scrollwheel delta
  65. if ('detail' in orgEvent) { deltaY = orgEvent.detail * -1; }
  66. if ('wheelDelta' in orgEvent) { deltaY = orgEvent.wheelDelta; }
  67. if ('wheelDeltaY' in orgEvent) { deltaY = orgEvent.wheelDeltaY; }
  68. if ('wheelDeltaX' in orgEvent) { deltaX = orgEvent.wheelDeltaX * -1; }
  69. // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
  70. if ('axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) {
  71. deltaX = deltaY * -1;
  72. deltaY = 0;
  73. }
  74. // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
  75. delta = deltaY === 0 ? deltaX : deltaY;
  76. // New school wheel delta (wheel event)
  77. if ('deltaY' in orgEvent) {
  78. deltaY = orgEvent.deltaY * -1;
  79. delta = deltaY;
  80. }
  81. if ('deltaX' in orgEvent) {
  82. deltaX = orgEvent.deltaX;
  83. if (deltaY === 0) { delta = deltaX * -1; }
  84. }
  85. // No change actually happened, no reason to go any further
  86. if (deltaY === 0 && deltaX === 0) { return; }
  87. // Need to convert lines and pages to pixels if we aren't already in pixels
  88. // There are three delta modes:
  89. // * deltaMode 0 is by pixels, nothing to do
  90. // * deltaMode 1 is by lines
  91. // * deltaMode 2 is by pages
  92. if (orgEvent.deltaMode === 1) {
  93. var lineHeight = $.data(this, 'mousewheel-line-height');
  94. delta *= lineHeight;
  95. deltaY *= lineHeight;
  96. deltaX *= lineHeight;
  97. } else if (orgEvent.deltaMode === 2) {
  98. var pageHeight = $.data(this, 'mousewheel-page-height');
  99. delta *= pageHeight;
  100. deltaY *= pageHeight;
  101. deltaX *= pageHeight;
  102. }
  103. // Store lowest absolute delta to normalize the delta values
  104. absDelta = Math.max(Math.abs(deltaY), Math.abs(deltaX));
  105. if (!lowestDelta || absDelta < lowestDelta) {
  106. lowestDelta = absDelta;
  107. // Adjust older deltas if necessary
  108. if (shouldAdjustOldDeltas(orgEvent, absDelta)) {
  109. lowestDelta /= 40;
  110. }
  111. }
  112. // Adjust older deltas if necessary
  113. if (shouldAdjustOldDeltas(orgEvent, absDelta)) {
  114. // Divide all the things by 40!
  115. delta /= 40;
  116. deltaX /= 40;
  117. deltaY /= 40;
  118. }
  119. // Get a whole, normalized value for the deltas
  120. delta = Math[delta >= 1 ? 'floor' : 'ceil'](delta / lowestDelta);
  121. deltaX = Math[deltaX >= 1 ? 'floor' : 'ceil'](deltaX / lowestDelta);
  122. deltaY = Math[deltaY >= 1 ? 'floor' : 'ceil'](deltaY / lowestDelta);
  123. // Add information to the event object
  124. event.deltaX = deltaX;
  125. event.deltaY = deltaY;
  126. event.deltaFactor = lowestDelta;
  127. // Go ahead and set deltaMode to 0 since we converted to pixels
  128. // Although this is a little odd since we overwrite the deltaX/Y
  129. // properties with normalized deltas.
  130. event.deltaMode = 0;
  131. // Add event and delta to the front of the arguments
  132. args.unshift(event, delta, deltaX, deltaY);
  133. // Clearout lowestDelta after sometime to better
  134. // handle multiple device types that give different
  135. // a different lowestDelta
  136. // Ex: trackpad = 3 and mouse wheel = 120
  137. if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
  138. nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
  139. return ($.event.dispatch || $.event.handle).apply(this, args);
  140. }
  141. function nullLowestDelta() {
  142. lowestDelta = null;
  143. }
  144. function shouldAdjustOldDeltas(orgEvent, absDelta) {
  145. return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
  146. }
  147. })(window.jQuery);