Javascript 使用jQuery拖动滚动页面

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

$("html").kinetic();

我想让页面在平板电脑、IE10和11上可以滚动，这样用户就可以像在移动设备上一样，只需向上推页面即可向下滚动

---

在纯JS或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插件的一个版本，扩展为允许通过设置进行垂直和水平滚动。它还允许您更改所使用的

光标


（函数（$）{
$.dragScroll=函数（选项）{
变量设置=$.extend({
对,，
对,，
游标：空
}，选项）；
var=false，
clickY，clickX；
var getCursor=function（）{
如果（settings.cursor）返回settings.cursor；
如果（settings.scrollVertical&&settings.scrollHorizontal）返回“move”；
如果（settings.scrollVertical）返回“行大小调整”；
if（settings.scrollHorizontal）返回'col resize'；
}
var updateScrollPos=函数（e，el）{
$（'html'）.css（'cursor'，getCursor（））；
变量$el=$（el）；
settings.scrollVertical&&$el.scrollTop（$el.scrollTop（）+（clickY-e.pageY））；
settings.scrollHorizontal&&$el.scrollLeft（$el.scrollLeft（）+（clickX-e.pageX））；
}
$（文件）({
“mousemove”：函数（e）{
单击&&updateScrollPos（e，this）；
},
“mousedown”：函数（e）{
单击=真；
clickY=e.pageY；
点击X=e.pageX；
},
“mouseup”：函数（）{
单击=假；
$（'html'）.css（'cursor'，'auto'）；
}
});
}
}（jQuery）
$.dragScroll（）
/*注意：CSS与解决方案无关。
这仅在本演示中需要*/
身体，
html{
填充：0；
保证金：0；
}
div{
高度：1000px；
宽度：2000px；
边框底部：3个虚线#EEE；
/*渐变只是为了使滚动运动更加明显*/
背景：rgba（201,2,2,1）；
背景：-moz线性梯度（-125度，rgba（201，2，2，1）0%，rgba（204，0204，1）16%，rgba（94，0201，1）31%，rgba（0153199，1）43%，rgba（0199119，1）56%，rgba（136199，0，1）69%，rgba（199133，0，1）83%，rgba（107，0，0，1）100%）；
背景：-webkit渐变（左上，右下，颜色停止（0%，rgba（201，2，2，1）），颜色停止（16%，rgba（204，0，204，1）），颜色停止（31%，rgba（94，0，201，1）），颜色停止（43%，rgba（0，153，199，1）），颜色停止（56%，rgba（0，199，119，1）），颜色停止（69%，rgba（136，199，0，1）），颜色停止（83%，rgba（199，133，0，1）），颜色停止（100%，rgba(107, 0, 0, 1)));
背景：-webkit线性梯度（-125度，rgba（201,2,2,1）0%，rgba（204,0204,1）16%，rgba（94,02001,1）31%，rgba（0153199,1）43%，rgba（0199119,1）56%，rgba（136199,0,1）69%，rgba（199,133,0,1）83%，rgba（107,0,0,1）100%）；
背景：-o-线性梯度（-125度，rgba（201，2，2，1）0%，rgba（204，0204，1）16%，rgba（94，0201，1）31%，rgba（0153199，1）43%，rgba（0199119，1）56%，rgba（136199，0，1）69%，rgba（199133，0，1）83%，rgba（107，0，0，1）100%）；
背景：-ms线性梯度（-125度，rgba（201,2,2,1）0%，rgba（204,0204,1）16%，rgba（94,02001,1）31%，rgba（0153199,1）43%，rgba（0199119,1）56%，rgba（136199,0,1）69%，rgba（199133,0,1）83%，rgba（107,0,0,1）100%）；
背景：线性梯度（-110度，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%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#c90202'，endColorstr='#6b0000'，GradientType=1）；
颜色：#EEE；
填充：20px；
字号：2em；
}
身体{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}

第一。。。
第二…
我只想添加。使用Rory的代码我进行了水平滚动

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

var=false，base=0；
$（'someDiv'）。在({
mousemove:function（e）{
单击和函数（xAxis）{
var_this=$（this）；
如果（基>X轴）{
base=xAxis；
_css（'margin-left'，'-=1px'）；
}
if（基
此代码将在水平和垂直鼠标拖动滚动上运行。它非常简单

var curYPos = 0,
    curXPos = 0,
    curDown = false;

window.addEventListener('mousemove', function(e){ 
  if(curDown === true){
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});

window.addEventListener('mousedown', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });
window.addEventListener('mouseup', function(e){ curDown = false; }); 

根据第一个答案，这是鼠标拖动水平滚动的代码：

var clicked = false, clickX;
$(document).on({
    'mousemove': function(e) {
        clicked && updateScrollPos(e);
    },
    'mousedown': function(e) {
        e.preventDefault();        
        clicked = true;
        clickX = e.pageX;
    },
    'mouseup': function() {
        clicked = false;
        $('html').css('cursor', 'auto');
    }
});

var updateScrollPos = function(e) {
    $('html').css('cursor', 'grabbing');
    $(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}

基于Rory McCrossan的想法，使用AngularJS2实现

import {Directive, ElementRef, OnDestroy, Input} from "@angular/core";

declare var jQuery: any;

@Directive({
    selector: '[appDragScroll]'
})
export class DragScrollDirective implements OnDestroy {

    @Input() scrollVertical: boolean = true;
    @Input() scrollHorizontal: boolean = true;

    private dragging = false;
    private originalMousePositionX: number;
    private originalMousePositionY: number;
    private originalScrollLeft: number;
    private originalScrollTop: number;

    constructor(private nodeRef: ElementRef) {
        let self = this;

        jQuery(document).on({
            "mousemove": function (e) {
                self.dragging && self.updateScrollPos(e);
            },
            "mousedown": function (e) {
                self.originalMousePositionX = e.pageX;
                self.originalMousePositionY = e.pageY;
                self.originalScrollLeft = jQuery(self.nodeRef.nativeElement).scrollLeft();
                self.originalScrollTop = jQuery(self.nodeRef.nativeElement).scrollTop();
                self.dragging = true;
            },
            "mouseup": function (e) {
                jQuery('html').css('cursor', 'auto');
                self.dragging = false;
            }
        });

    }

    ngOnDestroy(): void {
        jQuery(document).off("mousemove");
        jQuery(document).off("mousedown");
        jQuery(document).off("mouseup");
    }

    private updateScrollPos(e) {
        jQuery('html').css('cursor', this.getCursor());

        let $el = jQuery(this.nodeRef.nativeElement);
        if (this.scrollHorizontal) {
            $el.scrollLeft(this.originalScrollLeft + (this.originalMousePositionX - e.pageX));
        }
        if (this.scrollVertical) {
            $el.scrollTop(this.originalScrollTop + (this.originalMousePositionY - e.pageY));
        }
    }

    private getCursor() {
        if (this.scrollVertical && this.scrollHorizontal) return 'move';
        if (this.scrollVertical) return 'row-resize';
        if (this.scrollHorizontal) return 'col-resize';
    }

}

我对Rory的代码进行了大量修改，并使每元素侧滚动正常工作。对于一个Web应用程序在一个视图中具有多个可滚动分幅的项目，我需要这样做。添加
。将
类拖动到任何元素，可能会进行一些样式设置，这样应该很好

// jQuery sidescroll code. Can easily be modified for vertical scrolling as well.
// This code was hacked together so clean it up if you use it in prod.
// Written by Josh Moore
// Thanks to Rory McCrossan for a good starting point

// How far away the mouse should move on a drag before interrupting click
// events (your own code must also interrupt regular click events with a
// method that calls getAllowClick())
const THRESHOLD = 32;
var clicked = false;
var allowClick = true;

// mouseX: most recent mouse position. updates when mouse moves.
//     el: jQuery element that will be scrolled.
//    thX: "threshold X", where the mouse was at the beginning of the drag
var mouseX, startY, el, thX;

// Add the .drag class to any element that should be scrollable.
// You may need to also add these CSS rules:
//   overflow: hidden; /* can be replaced with overflow-x or overflow-y */
//   whitespace: none;
function drag() {
    $('.drag').on({
        'mousemove': e => {
            if (el != null && clicked) {
                el.scrollLeft(el.scrollLeft() + (mouseX - e.pageX));
                mouseX = e.pageX;
                allowClick = Math.abs(thX - mouseX) > THRESHOLD ? false : true;
            }
        },
        'mousedown': e => {
            clicked = true;
            // This lets the user click child elements of the scrollable.
            // Without it, you must click the .drag element directly to be able to scroll.
            el = $(e.target).closest('.drag');
            mouseX = e.pageX;
            thX = e.pageX;
        },
        'mouseup': e => {
            clicked = false;
            el = null;
            allowClick = true;
        }
    });
}

function getAllowClick() {
    return allowClick;
}

同样，我没有使用垂直滚动，但添加起来会非常简单（用Y替换X，
scrollTop（）
而不是
scrollLeft（）
，等等）。希望这对将来的人有所帮助！
这个框架是用普通javascript编写的，对我来说效果最好

它还支持div中的滚动条

注意：如果创建动态内容，请调用
dragscroll.reset（）；