An example of dragscroll is dragging and dragging with a mouse. JavaScript Scroll by Dragging

Lecture



The default behavior of browsers is compatible for scrolling using the mouse wheel or using the arrow keys. Scrolling both horizontally and vertically is not possible by holding the page like dragging an object (usually in mobile phones). The mouse wheel is not the best option for mobile devices, where the user has to move up and down, left-right with a touch.

Make your content like in Google Maps

While checking google maps you notice you can drag it with the mouse. Drag the scrollbar JS allows you to drag the contents of the page while holding the mouse button. DragScroll allows you to drag pages horizontally and vertically with the mouse.

This script is applied to elements that have been cut by overflow and drag-and-drop assigned by the dragscroll classes.

it has no dependencies and is written in pure javascript. To update the search for dragscroll items, call dragscroll.reset()

You can also add a nochilddrag attribute to the scrollable element, which will give the opportunity to drag the scroll for the element itself, but not for its descendants. This can be useful if you want to turn on the scrolling area by dragging its empty space, but retain the ability to select text.

it is also better to add CSS style

.dragscroll {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: grab;
}

An example of dragscroll is dragging and dragging with a mouse. JavaScript Scroll by Dragging

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
  define (['exports'], factory);
  } else if (typeof exports! == 'undefined') {
  factory (exports);
  } else {
  factory ((root.dragscroll = {}));
  }
  } (this, function (exports) {
  var _window = window;
  var _document = document;
  var mousemove = 'mousemove';
  var mouseup = 'mouseup';
  var mousedown = 'mousedown';
  var EventListener = 'EventListener';
  var addEventListener = 'add' + EventListener;
  var removeEventListener = 'remove' + EventListener;
  var newScrollX, newScrollY;
  
  var dragged = [];
  var reset = function (i, el) {
  for (i = 0; i <dragged.length;) {
  el = dragged [i ++];
  el = el.container || el;
  el [removeEventListener] (mousedown, el.md, 0);
  _window [removeEventListener] (mouseup, el.mu, 0);
  _window [removeEventListener] (mousemove, el.mm, 0);
  }
  
  // cloning into array since HTMLCollection is updated dynamically
  dragged = [] .slice.call (_document.getElementsByClassName ('dragscroll'));
  for (i = 0; i <dragged.length;) {
  (function (el, lastClientX, lastClientY, pushed, scroller, cont) {
  (cont = el.container || el) [addEventListener] (
  mousedown
  cont.md = function (e) {
  if (! el.hasAttribute ('nochilddrag') ||
  _document.elementFromPoint (
  e.pageX, e.pageY
  ) == cont
  ) {
  pushed = 1;
  lastClientX = e.clientX;
  lastClientY = e.clientY;
  
  e.preventDefault ();
  }
  }, 0
  );
  
  _window [addEventListener] (
  mouseup, cont.mu = function () {pushed = 0;}, 0
  );
  
  _window [addEventListener] (
  mousemove,
  cont.mm = function (e) {
  if (pushed) {
  (scroller = el.scroller || el) .scrollLeft - =
  newScrollX = (- lastClientX + (lastClientX = e.clientX));
  scroller.scrollTop - =
  newScrollY = (- lastClientY + (lastClientY = e.clientY));
  if (el == _document.body) {
  (scroller = _document.documentElement) .scrollLeft - = newScrollX;
  scroller.scrollTop - = newScrollY;
  }
  }
  }, 0
  );
  }) (dragged [i ++]);
  }
  }
  
  
  if (_document.readyState == 'complete') {
  reset ();
  } else {
  _window [addEventListener] ('load', reset, 0);
  }
  
  exports.reset = reset;
  }));

just call this script. if there is a dynamic addition or assignment of a class

dragscroll you need to call dragscroll.reset()

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone