使用jQuery在拖动时滚动页面

Question

我已经尝试过使用dynamic.js和下面的代码，但是，当我在IE11中尝试此操作时，每次滚动时它都会一直跳到顶部：

$("html").kinetic();

我想使页面在平板电脑，IE10和11上可滚动，以便用户可以像在移动设备上一样向上推动页面以向下滚动。

如何在不跳到顶部的情况下在纯JS或jQuery中做到这一点？

Answer 1

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

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>