blocks|key|4709498|text|我只是想补充一下。使用Rory的代码，我进行了水平滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4709499|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',+'%2B=1px');
++++++++++++}
++++++++}.call($(this),+e.pageX);
++++},
++++mousedown:+function(e)+{
++++++++clicked+=+true;
++++++++base+=+e.pageX;
++++},
++++mouseup:+function(e)+{
++++++++clicked+=+false;
++++++++base+=+0;
++++}
});|code-block|syntax|javascript|4709500|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I just like to add. Using Rory's code I made horizontal scrolling.

<pre><code>var clicked = false, base = 0;

$('#someDiv').on({
 mousemove: function(e) {
 clicked &amp;&amp; function(xAxis) {
 var _this = $(this);
 if(base &gt; xAxis) {
 base = xAxis;
 _this.css('margin-left', '-=1px');
 }
 if(base &lt; 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;
 }
});
</code></pre>

blocks|key|4709513|text|此代码将在水平和垂直鼠标拖动滚动上工作。这相当简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4709514|var+curYPos+=+0,
++++curXPos+=+0,
++++curDown+=+false;

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

window.addEventListener('mousedown',+function(e){+curDown+=+true;+curYPos+=+e.pageY;+curXPos+=+e.pageX;+});
window.addEventListener('mouseup',+function(e){+curDown+=+false;+});+|code-block|syntax|javascript|4709515|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This code will work on horizontal and vertical mouse drag scroll. It's pretty simple.

<pre><code>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; }); 
</code></pre>

blocks|key|203729|text|基于第一个答案，这是鼠标拖动时水平滚动的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203730|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()+%2B+(clickX+-+e.pageX));
}|code-block|syntax|javascript|203731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Based on the first answer, this is the code for horizontal scroll on mouse drag:

<pre><code>var clicked = false, clickX;
$(document).on({
 'mousemove': function(e) {
 clicked &amp;&amp; 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));
}
</code></pre>

blocks|key|203763|text|基于Rory+McCrossan的想法，用AngularJS2实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203764|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+%2B+(this.originalMousePositionX+-+e.pageX));
++++++++}
++++++++if+(this.scrollVertical)+{
++++++++++++$el.scrollTop(this.originalScrollTop+%2B+(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';
++++}

}|code-block|syntax|javascript|203765|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Base on Rory McCrossan's idea, implemented with AngularJS2.

<pre><code>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 &amp;&amp; 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 &amp;&amp; this.scrollHorizontal) return 'move';
 if (this.scrollVertical) return 'row-resize';
 if (this.scrollHorizontal) return 'col-resize';
 }

}
</code></pre>

blocks|key|4709633|text|我对Rory的代码做了相当多的修改，并且让每个元素的侧边滚动可以正常工作。我需要它用于一个项目，该项目在一个webapp的单一视图中有多个滚动磁贴。将.drag类添加到任何元素中，可能需要做一些样式处理，这样就可以了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4709634|//+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()+%2B+(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;
}|code-block|syntax|javascript|4709635|同样，我没有使用垂直滚动，但是添加起来非常简单(用Y代替X，用scrollLeft()代替scrollTop()，等等)。希望这对将来有帮助的人！|4709636|entityMap^0|23|5|0|0|V|C|19|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

I modified Rory's code quite a bit, and I got per-element side scrolling to work. I needed that for a project that had multiple scrollable tiles in a single view for a webapp. Add the <code>.drag</code> class to any element, possibly do a bit of styling, and it should be good to go.

<pre><code>// 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 =&gt; {
 if (el != null &amp;&amp; clicked) {
 el.scrollLeft(el.scrollLeft() + (mouseX - e.pageX));
 mouseX = e.pageX;
 allowClick = Math.abs(thX - mouseX) &gt; THRESHOLD ? false : true;
 }
 },
 'mousedown': e =&gt; {
 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 =&gt; {
 clicked = false;
 el = null;
 allowClick = true;
 }
 });
}

function getAllowClick() {
 return allowClick;
}
</code></pre>

Again, I had no use for vertical scrolling but it would be pretty simple to add (replace X's with Y's, <code>scrollTop()</code> instead of <code>scrollLeft()</code>, etc). Hope this helps someone in the future!

blocks|key|203807|text|这个框架是用普通的javascript编写的，最适合我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203808|它还支持div中的滚动条。|203809|注意:如果您创建动态内容，请在render之后调用dragscroll.reset();。|offset|length|style|CODE|203810|dragscroll|203811|Usage|203812|demo|203813|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/asvd/dragscroll|1|https://github.com/asvd/dragscroll#usage|2|http://asvd.github.io/dragscroll/^0|0|0|P|J|0|0|A|0|0|0|5|1|0|0|4|2|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@$F|14|G|15|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|N|3|O|5|6|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|P|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|S|T|U|A|$V|Y]]|Z|$5|S|T|U|A|$V|10]]]]

This framework is written in vanilla javascript, and worked best for me.
It also supports scroller inside divs.
Note: If you create dynamic content, call <code>dragscroll.reset();</code> after render.
<a href="https://github.com/asvd/dragscroll" rel="nofollow noreferrer">dragscroll</a>
<a href="https://github.com/asvd/dragscroll#usage" rel="nofollow noreferrer">Usage</a>
<a href="http://asvd.github.io/dragscroll/" rel="nofollow noreferrer">demo</a>

I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll:

<pre><code>$("html").kinetic();
</code></pre>

I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the page up to scroll down as you would on mobile devices. 

How can I do this in pure-JS or jQuery without it jumping to the top?

Scroll the page on drag with jQuery

jQuery

我试过使用kinetic.js和下面的代码，但是当我在IE11中尝试时，每次滚动时它都会跳到顶部：$("html").kinetic();我想让页面在平板电脑和IE10和11上可滚动，这样用户就可以像在移动设备上那样向上推送页面向下滚动。我如何才能在纯JS或jQuery中做到这一点，而不是跳到顶部呢？

问使用jQuery在拖动时滚动页面
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在拖动时滚动页面EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在拖动时滚动页面
EN