diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index cd02f3d2..c45440ed 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -675,6 +675,15 @@ function (option, path) {
+
+ horizontalScroll
+ Boolean
+ false
+ This option allows you to scroll horizontally to move backwards and forwards in the time range.
+ Only applicable when option zoomCtrl
is defined or zoomable
is false
.
+
+
+
itemsAlwaysDraggable
boolean
diff --git a/examples/timeline/other/horizontalScroll.html b/examples/timeline/other/horizontalScroll.html
new file mode 100644
index 00000000..a999cd51
--- /dev/null
+++ b/examples/timeline/other/horizontalScroll.html
@@ -0,0 +1,77 @@
+
+
+ Timeline | Horizontal Scroll Option
+
+
+
+
+
+
+
+
+
+Timeline horizontal scroll option
+
+
+
+
+
+
+
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 7b5be3e6..76ed050b 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -161,6 +161,9 @@ Core.prototype._create = function (container) {
// prevent scrolling when zoomKey defined or activated
if (!me.options.zoomKey || event[me.options.zoomKey]) return
+ // prevent scrolling vertically when horizontalScroll is true
+ if (me.options.horizontalScroll) return
+
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta / 120;
@@ -254,7 +257,7 @@ Core.prototype.setOptions = function (options) {
var fields = [
'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
- 'locale', 'locales', 'moment', 'rtl', 'zoomKey'
+ 'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll'
];
util.selectiveExtend(fields, this.options, options);
diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js
index 41e500af..075b0baa 100644
--- a/lib/timeline/Range.js
+++ b/lib/timeline/Range.js
@@ -81,7 +81,7 @@ Range.prototype.setOptions = function (options) {
// copy the options that we know
var fields = [
'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable',
- 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl'
+ 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'horizontalScroll'
];
util.selectiveExtend(fields, this.options, options);
@@ -483,15 +483,10 @@ Range.prototype._onDragEnd = function (event) {
* @private
*/
Range.prototype._onMouseWheel = function(event) {
- // only allow zooming when configured as zoomable and moveable
- if (!(this.options.zoomable && this.options.moveable)) return;
-
- // only zoom when the mouse is inside the current range
- if (!this._isInsideRange(event)) return;
+ // Prevent default actions caused by mouse wheel
+ // (else the page and timeline both zoom and scroll)
+ event.preventDefault();
- // only zoom when the according key is pressed and the zoomKey option is set
- if (this.options.zoomKey && !event[this.options.zoomKey]) return;
-
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
@@ -502,6 +497,27 @@ Range.prototype._onMouseWheel = function(event) {
delta = -event.detail / 3;
}
+ // don't allow zoom when the according key is pressed and the zoomKey option or not zoomable but movable
+ if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable)
+ || (!this.options.zoomable && this.options.moveable)) {
+ if (this.options.horizontalScroll) {
+ // calculate a single scroll jump relative to the range scale
+ var diff = delta * (this.end - this.start) / 20;
+ // calculate new start and end
+ var newStart = this.start - diff;
+ var newEnd = this.end - diff;
+
+ this.setRange(newStart, newEnd);
+ }
+ return;
+ }
+
+ // only allow zooming when configured as zoomable and moveable
+ if (!(this.options.zoomable && this.options.moveable)) return;
+
+ // only zoom when the mouse is inside the current range
+ if (!this._isInsideRange(event)) return;
+
// If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
@@ -524,10 +540,6 @@ Range.prototype._onMouseWheel = function(event) {
this.zoom(scale, pointerDate, delta);
}
-
- // Prevent default actions caused by mouse wheel
- // (else the page and timeline both zoom and scroll)
- event.preventDefault();
};
/**
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index a20d27f4..bfcac84b 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -26,6 +26,7 @@ let allOptions = {
//globals :
align: {string},
rtl: {boolean, 'undefined': 'undefined'},
+ horizontalScroll: {boolean, 'undefined': 'undefined'},
autoResize: {boolean},
clickToUse: {boolean},
dataAttributes: {string, array},