#35 fix non scrollable document element issue

CHANGELOG.md

@@ -1,6 +1,6 @@
 # 1.9.0
 
-- 
+- Fix non scrollable document element issue. See [#35](https://github.com/ThibaultJanBeyer/DragSelect/issues/35)
 - Added `onDragStartBegin` callback. Helpful for my friends at issue [#24](https://github.com/ThibaultJanBeyer/DragSelect/issues/24)
 - Increase performance by calculating the selection rectangle outside of the `_isElementTouching` function. Tested on 30.000 Nodes. The selection is still usable although a bit laggy on 30k nodes.
 - Rename `isElementTouching` to private `_isElementTouching`. You also have to pass a `selectionRect` as second argument now instead of just passing the container node. This is not considered a breaking change because that function was not exposed before.

README.md

@@ -83,7 +83,7 @@ var ds = new DragSelect({
   customStyles: false,  // If set to true, no styles (except for position absolute) will be applied by default.
   multiSelectKeys: ['ctrlKey', 'shiftKey', 'metaKey'],  // special keys that allow multiselection.
   multiSelectMode: false,  // If set to true, the multiselection behavior will be turned on by default without the need of modifier keys. Default: false
-  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0.0001 to disable autoscrolling. Default = 1
+  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0 to disable autoscrolling. Default = 1
   onDragStart: function(element) {}, // fired when the user clicks in the area. This callback gets the event object. Executed after DragSelect function code ran, befor the setup of event listeners.
   onDragMove: function(element) {}, // fired when the user drags. This callback gets the event object. Executed before DragSelect function code ran, after getting the current mouse position.
   onElementSelect: function(element) {}, // fired every time an element is selected. (element) = just selected node

dist/DragSelect.js

@@ -143,7 +143,7 @@ DragSelect.prototype._setupOptions = function(options) {
     'metaKey'
   ];
   this.multiSelectMode = options.multiSelectMode || false;
-  this.autoScrollSpeed = options.autoScrollSpeed || 1;
+  this.autoScrollSpeed = options.autoScrollSpeed === 0 ? 0 : options.autoScrollSpeed || 1;
   this.selectCallback = options.onElementSelect || function() {};
   this.unselectCallback = options.onElementUnselect || function() {};
   this.onDragStartBegin = options.onDragStartBegin || function() {};
@@ -690,7 +690,7 @@ DragSelect.prototype._isElementTouching = function(
 DragSelect.prototype._autoScroll = function(event) {
   var edge = this.isCursorNearEdge(event, this.area);
 
-  var _area = this.area === document ? this.area.body : this.area;
+  var _area = this.area === document ? document.documentElement || document.body : this.area;
 
   if (edge === 'top' && _area.scrollTop > 0) {
     _area.scrollTop -= 1 * this.autoScrollSpeed;

dist/index.html

@@ -15,7 +15,7 @@
   customStyles: false,  // If set to true, no styles (except for position absolute) will be applied by default.
   multiSelectKeys: ['ctrlKey', 'shiftKey', 'metaKey'],  // special keys that allow multiselection. These key will allow the user add more elements to the selection instead of clearing the selection. The only possible values are keys that are provided via the event object. So far: <kbd>ctrlKey</kbd>, <kbd>shiftKey</kbd>, <kbd>metaKey</kbd> and <kbd>altKey</kbd>. Provide an empty array [] if you want to turn off the funcionality. Default: ['ctrlKey', 'shiftKey', 'metaKey']
   multiSelectMode: false,  // If set to true, the multiselection behavior will be turned on by default without the need of modifier keys. Default: false
-  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0.0001 to disable autoscrolling. Default = 1
+  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0 to disable autoscrolling. Default = 1
   onDragStart: function(element) {}, // fired when the user clicks in the area. This callback gets the event object. Executed after DragSelect function code ran, befor the setup of event listeners.
   onDragMove: function(element) {}, // fired when the user drags. This callback gets the event object. Executed before DragSelect function code ran, after getting the current mouse position.
   onElementSelect: function(element) {}, // fired every time an element is selected. (element) = just selected node

src/DragSelect.js

@@ -143,7 +143,7 @@ DragSelect.prototype._setupOptions = function(options) {
     'metaKey'
   ];
   this.multiSelectMode = options.multiSelectMode || false;
-  this.autoScrollSpeed = options.autoScrollSpeed || 1;
+  this.autoScrollSpeed = options.autoScrollSpeed === 0 ? 0 : options.autoScrollSpeed || 1;
   this.selectCallback = options.onElementSelect || function() {};
   this.unselectCallback = options.onElementUnselect || function() {};
   this.onDragStartBegin = options.onDragStartBegin || function() {};
@@ -690,7 +690,7 @@ DragSelect.prototype._isElementTouching = function(
 DragSelect.prototype._autoScroll = function(event) {
   var edge = this.isCursorNearEdge(event, this.area);
 
-  var _area = this.area === document ? this.area.body : this.area;
+  var _area = this.area === document ? document.documentElement || document.body : this.area;
 
   if (edge === 'top' && _area.scrollTop > 0) {
     _area.scrollTop -= 1 * this.autoScrollSpeed;

src/index.html

@@ -135,7 +135,7 @@ <h4 id="usage-c">2c. Extended</h4>
   customStyles: false,  // If set to true, no styles (except for position absolute) will be applied by default.
   multiSelectKeys: ['ctrlKey', 'shiftKey', 'metaKey'],  // special keys that allow multiselection. These key will allow the user add more elements to the selection instead of clearing the selection. The only possible values are keys that are provided via the event object. So far: <kbd>ctrlKey</kbd>, <kbd>shiftKey</kbd>, <kbd>metaKey</kbd> and <kbd>altKey</kbd>. Provide an empty array [] if you want to turn off the funcionality. Default: ['ctrlKey', 'shiftKey', 'metaKey']
   multiSelectMode: false,  // If set to true, the multiselection behavior will be turned on by default without the need of modifier keys. Default: false
-  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0.0001 to disable autoscrolling. Default = 1
+  autoScrollSpeed: 3,  // Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Set to 0 to disable autoscrolling. Default = 1
   onDragStart: function(element) {}, // fired when the user clicks in the area. This callback gets the event object. Executed after DragSelect function code ran, befor the setup of event listeners.
   onDragMove: function(element) {}, // fired when the user drags. This callback gets the event object. Executed before DragSelect function code ran, after getting the current mouse position.
   onElementSelect: function(element) {}, // fired every time an element is selected. (element) = just selected node