使用jQuery在拖动时滚动页面

使用jQuery在拖动时滚动页面

您可以通过记录单击时鼠标的位置以及被拖动时的当前位置来非常简单地完成此 *** 作。尝试这个：

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));}

为了防止拖动时选择文本，请添加以下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;}

---

更新资料

这是上述版本的jQuery插件，已扩展为允许通过设置进行垂直和水平滚动。它还允许您更改已

cursor

使用的。

(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();body,html {  padding: 0;  margin: 0;}div {  height: 1000px;  width: 2000px;  border-bottom: 3px dashed #EEE;    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>