Scroll the page on drag up down with jQuery

Scroll the page on drag up down with jQuery
position of the mouse when clicked, and the current position when being dragged.
var ondrag= false, dragY;
 $(document).on({
 'mousemove': function(e) {
 ondrag && updateScrollPos(e);
 },
 'mousedown': function(e) {
 ondrag = true;
 dragY = e.pageY;
 },
 'mouseup': function() {
 ondrag = false;
 $('html').css('cursor', 'auto');
 }
 });

var updateScrollPos = function(e) {
 $('html').css('cursor', 'row-resize');
 $(window).scrollTop($(window).scrollTop() + (dragY- e.pageY));
 }

To prevent text selection while dragging, add the following CSS:

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*