Scroll the page on drag with jQuery
Solution 1:
You can do this quite simply by recording the position of the mouse when clicked, and the current position when being dragged. Try this:
var clicked = false, clickY;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'row-resize');
$(window).scrollTop($(window).scrollTop() + (clickY - 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;
}
Example fiddle
Update
Here's an version of the above as a jQuery plugin, extended to allow both vertical and horizontal scrolling via the settings. It also allows you to change the cursor that's used too.
(function($) {
$.dragScroll = function(options) {
var settings = $.extend({
scrollVertical: true,
scrollHorizontal: true,
cursor: null
}, options);
var clicked = false,
clickY, clickX;
var getCursor = function() {
if (settings.cursor) return settings.cursor;
if (settings.scrollVertical && settings.scrollHorizontal) return 'move';
if (settings.scrollVertical) return 'row-resize';
if (settings.scrollHorizontal) return 'col-resize';
}
var updateScrollPos = function(e, el) {
$('html').css('cursor', getCursor());
var $el = $(el);
settings.scrollVertical && $el.scrollTop($el.scrollTop() + (clickY - e.pageY));
settings.scrollHorizontal && $el.scrollLeft($el.scrollLeft() + (clickX - e.pageX));
}
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e, this);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
}
}(jQuery))
$.dragScroll();/* Note: CSS is not relevant to the solution.
This is only needed for this demonstration */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 1000px;
width: 2000px;
border-bottom: 3px dashed #EEE;
/* gradient is only to make the scroll movement more obvious */
background: rgba(201, 2, 2, 1);
background: -moz-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(201, 2, 2, 1)), color-stop(16%, rgba(204, 0, 204, 1)), color-stop(31%, rgba(94, 0, 201, 1)), color-stop(43%, rgba(0, 153, 199, 1)), color-stop(56%, rgba(0, 199, 119, 1)), color-stop(69%, rgba(136, 199, 0, 1)), color-stop(83%, rgba(199, 133, 0, 1)), color-stop(100%, rgba(107, 0, 0, 1)));
background: -webkit-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
background: -o-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
background: -ms-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
background: linear-gradient(-110deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c90202', endColorstr='#6b0000', GradientType=1);
color: #EEE;
padding: 20px;
font-size: 2em;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>First...</div>
<div>Second...</div>Solution 2:
I just like to add. Using Rory's code I made horizontal scrolling.
var clicked = false, base = 0;
$('#someDiv').on({
mousemove: function(e) {
clicked && function(xAxis) {
var _this = $(this);
if(base > xAxis) {
base = xAxis;
_this.css('margin-left', '-=1px');
}
if(base < xAxis) {
base = xAxis;
_this.css('margin-left', '+=1px');
}
}.call($(this), e.pageX);
},
mousedown: function(e) {
clicked = true;
base = e.pageX;
},
mouseup: function(e) {
clicked = false;
base = 0;
}
});