Fix scroll bugs with vertical scrollbar (#2228)

* Add initial scroller without options
* Add initial scroll without an option
* Add verticalScroll option
* Fix scrollbar positions
* Add docs
* fix example
* remove jquery dependency
* Fix example
* Fix review comments
* Fix verticalScroll and horizontalScroll docs
* Fix bug in timeline option.rtl if otion is undefined
* Remove hack
* Fix breaking of timeline
* Fix scrolling bugs
* Remove silly mistake

lib/timeline/Core.js

@@ -112,7 +112,7 @@ Core.prototype._create = function (container) {
     }
   }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
-  this.on('pan',         this._onDrag.bind(this));
+  this.on('panmove',         this._onDrag.bind(this));
 
   var me = this;
   this.on('_change', function (properties) {
@@ -191,8 +191,13 @@ Core.prototype._create = function (container) {
 
     var current = this.props.scrollTop;
     var adjusted = current + delta * 120;
+
     if (this.isActive()) {
       this._setScrollTop(adjusted);
+      if (this.options.verticalScroll) {
+        this.dom.left.parentNode.scrollTop = -adjusted;
+        this.dom.right.parentNode.scrollTop = -adjusted;
+      }
       this._redraw();
       this.emit('scroll', event);
     }
@@ -202,29 +207,29 @@ Core.prototype._create = function (container) {
     event.preventDefault();
   }
 
-  if (this.dom.root.addEventListener) {
+  if (this.dom.center.addEventListener) {
     // IE9, Chrome, Safari, Opera
-    this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false);
+    this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false);
     // Firefox
-    this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
+    this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
   } else {
     // IE 6/7/8
-    this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this));
+    this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this));
   }
 
   function onMouseScrollSide(event) {
-    var current = this.scrollTop;
-    var adjusted = -current;
+    if (!me.options.verticalScroll) return;
+    event.preventDefault();
     if (me.isActive()) {
+      var adjusted = -event.target.scrollTop;
       me._setScrollTop(adjusted);
-
       me._redraw();
-      me.emit('scroll', event);
+      me.emit('scrollSide', event);
     }
   }
 
-  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide);
-  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide);
+  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
+  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
 
   this.customTimes = [];
 
@@ -820,10 +825,9 @@ Core.prototype._redraw = function() {
 
   // update the scrollTop, feasible range for the offset can be changed
   // when the height of the Core or of the contents of the center changed
-  this._updateScrollTop();
+  var offset = this._updateScrollTop();
 
   // reposition the scrollable contents
-  var offset = this.props.scrollTop;
   if (options.orientation.item != 'top') {
     offset += Math.max(this.props.centerContainer.height - this.props.center.height -
       this.props.border.top - this.props.border.bottom, 0);
@@ -844,12 +848,10 @@ Core.prototype._redraw = function() {
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
   if (this.options.verticalScroll) {
-    this.dom.shadowTopRight.style.visibility     = "hidden";
-    this.dom.shadowBottomRight.style.visibility  = "hidden";
-    this.dom.shadowTopLeft.style.visibility      = "hidden";
-    this.dom.shadowBottomLeft.style.visibility   = "hidden";
-    document.getElementsByClassName('vis-left')[0].scrollTop = -offset;
-    document.getElementsByClassName('vis-right')[0].scrollTop = -offset;
+    dom.shadowTopRight.style.visibility     = "hidden";
+    dom.shadowBottomRight.style.visibility  = "hidden";
+    dom.shadowTopLeft.style.visibility      = "hidden";
+    dom.shadowBottomLeft.style.visibility   = "hidden";
   } else {
     dom.left.style.top    = offset + 'px';
     dom.right.style.top   = offset + 'px';
@@ -1070,6 +1072,7 @@ Core.prototype._onPinch = function (event) {
  * @private
  */
 Core.prototype._onDrag = function (event) {
+  if (!event) return
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (!this.touch.allowDragging) return;
@@ -1079,6 +1082,10 @@ Core.prototype._onDrag = function (event) {
   var oldScrollTop = this._getScrollTop();
   var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
+  if (this.options.verticalScroll) {
+    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
+    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
+  }
 
   if (newScrollTop != oldScrollTop) {
     this.emit("verticalDrag");

lib/timeline/Range.js

@@ -390,6 +390,8 @@ Range.prototype._onDragStart = function(event) {
  * @private
  */
 Range.prototype._onDrag = function (event) {
+  if (!event) return
+
   if (!this.props.touch.dragging) return;
 
   // only allow dragging when configured as movable
@@ -445,6 +447,9 @@ Range.prototype._onDrag = function (event) {
     end:   endDate,
     byUser: true
   });
+
+  // fire a panmove event
+  this.body.emitter.emit('panmove');
 };
 
 /**

lib/timeline/Timeline.js

@@ -28,8 +28,8 @@ import Validator from '../shared/Validator';
  * @constructor
  * @extends Core
  */
-function Timeline (container, items, groups, options) {
 
+function Timeline (container, items, groups, options) {
   if (!(this instanceof Timeline)) {
     throw new SyntaxError('Constructor must be called with the new operator');
   }
@@ -545,25 +545,4 @@ Timeline.prototype.getEventProperties = function (event) {
   }
 };
 
- /**
- * Extend the drag event handler from Core, move the timeline vertically
- * @param {Event} event
- * @private
- */
-  Timeline.prototype._onDrag = function (event) {
-      // refuse to drag when we where pinching to prevent the timeline make a jump
-      // when releasing the fingers in opposite order from the touch screen, and refuse
-      // to drag when an item is already being dragged
-      if (!this.touch.allowDragging || this.itemSet.touchParams.itemIsDragging) return;
-
-      var delta = event.deltaY;
-
-      var oldScrollTop = this._getScrollTop();
-      var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
-
-      if (newScrollTop != oldScrollTop) {
-          this.emit("verticalDrag");
-      }
-  };
-
 module.exports = Timeline;