Fixes #2295 Issues with vertical scroll and maxHeight (#2302)

* Fixes #2273
* Remove console.log
* Fix for zoomable false
* Fix initial scrolling with verticalScroll and fix example

Author: yotamberk

examples/timeline/other/verticalScroll.html

@@ -52,12 +52,13 @@ <h2>With <code>
       date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
       var end = new Date(date);
 
+      var orderIndex = order + itemsPerGroup * truck
       items.add({
-        id: order + itemsPerGroup * truck,
+        id: orderIndex,
         group: truck,
         start: start,
         end: end,
-        content: 'Order ' + order
+        content: 'Order ' + orderIndex
       });
     }
   }
@@ -70,15 +71,10 @@ <h2>With <code>
     maxHeight: 200,
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-    editable: true,
-    margin: {
-      item: 10, // minimal margin between items
-      axis: 5   // minimal margin between items and the axis
-    },
-    orientation: 'top'
   };
 
   // create a Timeline
+
   options1 = Object.assign({}, options)
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, groups, options1);

lib/timeline/Core.js

@@ -174,11 +174,15 @@ Core.prototype._create = function (container) {
       this.emit('mousewheel', event);
     }
 
+    // prevent scrolling if not specified explicitly or when horizontalScroll is true
+    if (!this.options.verticalScroll || this.options.horizontalScroll) return;
+
     // prevent scrolling when zoomKey defined or activated
-    if (!this.options.zoomKey || event[this.options.zoomKey]) return
+    if (!this.options.zoomKey || event[this.options.zoomKey]) return;
 
-    // prevent scrolling vertically when horizontalScroll is true
-    if (this.options.horizontalScroll) return
+    // Prevent default actions caused by mouse wheel
+    // (else the page and timeline both scroll)
+    event.preventDefault();
 
     var delta = 0;
     if (event.wheelDelta) { /* IE/Opera. */
@@ -194,17 +198,9 @@ Core.prototype._create = function (container) {
 
     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);
     }
-
-    // Prevent default actions caused by mouse wheel
-    // (else the page and timeline both scroll)
-    event.preventDefault();
   }
 
   if (this.dom.centerContainer.addEventListener) {
@@ -1204,6 +1200,11 @@ Core.prototype._updateScrollTop = function () {
   if (this.props.scrollTop > 0) this.props.scrollTop = 0;
   if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
+  if (this.options.verticalScroll) {
+    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
+    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
+  }
+
   return this.props.scrollTop;
 };
 

lib/timeline/Range.js

@@ -488,10 +488,6 @@ Range.prototype._onDragEnd = function (event) {
  * @private
  */
 Range.prototype._onMouseWheel = function(event) {
-  // Prevent default actions caused by mouse wheel
-  // (else the page and timeline both zoom and scroll)
-  event.preventDefault();
-  
   // retrieve delta
   var delta = 0;
   if (event.wheelDelta) { /* IE/Opera. */
@@ -506,6 +502,10 @@ Range.prototype._onMouseWheel = function(event) {
   if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable) 
     || (!this.options.zoomable && this.options.moveable)) {
     if (this.options.horizontalScroll) {
+      // Prevent default actions caused by mouse wheel
+      // (else the page and timeline both scroll)
+      event.preventDefault();
+
       // calculate a single scroll jump relative to the range scale
       var diff = delta * (this.end - this.start) / 20;
       // calculate new start and end
@@ -544,6 +544,10 @@ Range.prototype._onMouseWheel = function(event) {
     var pointerDate = this._pointerToDate(pointer);
 
     this.zoom(scale, pointerDate, delta);
+
+    // Prevent default actions caused by mouse wheel
+    // (else the page and timeline both scroll)
+    event.preventDefault();
   }
 };