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
| (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
Scripting client side JavaScript, jqvery, BackBone
Terms: Scripting client side JavaScript, jqvery, BackBone