Requires

Provides

Scroller.js

Class which scrolls the contents of any Element (including the window) when the mouse reaches the Element's boundaries.

License:
MIT-style license
Authors:
Valerio Proietti
  1. 27
  2. 28
  3. 29
  4. 30
  5. 31
  6. 32
  7. 33
  8. 34
  9. 35
  10. 36
  11. 37
  12. 38
  13. 39
  14. 40
  15. 41
  16. 42
  17. 43
  18. 44
  19. 45
  20. 46
  21. 47
  22. 48
  23. 49
  24. 50
  25. 51
  26. 52
  27. 53
  28. 54
  29. 55
  30. 56
  31. 57
  32. 58
  33. 59
  34. 60
  35. 61
  36. 62
  37. 63
  38. 64
  39. 65
  40. 66
  41. 67
  42. 68
  43. 69
  44. 70
  45. 71
  46. 72
  47. 73
  48. 74
  49. 75
  50. 76
  51. 77
  52. 78
  53. 79
  54. 80
  55. 81
  56. 82
  57. 83
  58. 84
  59. 85
  60. 86
  61. 87
  62. 88
  63. 89
  64. 90
  65. 91
  66. 92
  67. 93
  68. 94
  69. 95
  70. 96
  71. 97
  72. 98
  73. 99
  74. 100
  75. 101
  76. 102
  77. 103
var Scroller = new Class({ Implements: [Events, Options], options: { area: 20, velocity: 1, onChange: function(x, y){ this.element.scrollTo(x, y); }, fps: 50 }, initialize: function(element, options){ this.setOptions(options); this.element = document.id(element); this.docBody = document.id(this.element.getDocument().body); this.listener = (typeOf(this.element) != 'element') ? this.docBody : this.element; this.timer = null; this.bound = { attach: this.attach.bind(this), detach: this.detach.bind(this), getCoords: this.getCoords.bind(this) }; }, start: function(){ this.listener.addEvents({ mouseover: this.bound.attach, mouseout: this.bound.detach }); return this; }, stop: function(){ this.listener.removeEvents({ mouseover: this.bound.attach, mouseout: this.bound.detach }); this.detach(); this.timer = clearInterval(this.timer); return this; }, attach: function(){ this.listener.addEvent('mousemove', this.bound.getCoords); }, detach: function(){ this.listener.removeEvent('mousemove', this.bound.getCoords); this.timer = clearInterval(this.timer); }, getCoords: function(event){ this.page = (this.listener.get('tag') == 'body') ? event.client : event.page; if (!this.timer) this.timer = this.scroll.periodical(Math.round(1000 / this.options.fps), this); }, scroll: function(){ var size = this.element.getSize(), scroll = this.element.getScroll(), pos = this.element != this.docBody ? this.element.getOffsets() : {x: 0, y:0}, scrollSize = this.element.getScrollSize(), change = {x: 0, y: 0}, top = this.options.area.top || this.options.area, bottom = this.options.area.bottom || this.options.area; for (var z in this.page){ if (this.page[z] < (top + pos[z]) && scroll[z] != 0){ change[z] = (this.page[z] - top - pos[z]) * this.options.velocity; } else if (this.page[z] + bottom > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z]){ change[z] = (this.page[z] - size[z] + bottom - pos[z]) * this.options.velocity; } } if (change.y || change.x) this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]); } });