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

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


/* 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>