javascript 如何通过拖动而不是使用滚动条滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6914360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll through a div by dragging and not by using the scroll bars
提问by EJay
I am working on a project that uses a touch-screen interface. I have a div inside of a smaller div, so the smaller div has scroll bars to access the rest of the first div. Here is the basic code for it.
我正在做一个使用触摸屏界面的项目。我在一个较小的 div 里面有一个 div，所以较小的 div 有滚动条来访问第一个 div 的其余部分。这是它的基本代码。
.div1{
height: 100px;
width: 100px;
}
.div2{
height: 50px;
width: 50px;
}
and the html is:
和 html 是：
<div id = "div2" class="div2">
<div id="div1" class="div1"></div>
</div>
Using javascript, I would like to be able to scroll through div2 by pressing (since it is a touch screen) an unoccupied part of the screen and dragging along the div. Basically, the scroll feature would behave the way google maps does when you click and drag in it. Can anybody help me with this? Thanks in advance!
使用 javascript，我希望能够通过按下（因为它是触摸屏）屏幕上未被占用的部分并沿 div 拖动来滚动 div2。基本上，滚动功能的行为方式与谷歌地图在您单击并拖动时的行为方式相同。有人可以帮我解决这个问题吗？提前致谢！
Note
笔记
In terms of mouse actions, pressing is equivalent to clicking here, just to be clear. I am also working in Firefox only, so cross-browser compatibility is not an issue.
在鼠标操作方面，按下相当于点击这里，只是为了清楚。我也只在 Firefox 中工作，所以跨浏览器兼容性不是问题。
采纳答案by Robot Woods
This works...I'd started making it for mobile safari before you cited FireFox...so it may have a little extra...
这有效......在你引用 FireFox 之前，我已经开始为移动 safari 制作它......所以它可能有一些额外的......
var _startX = 0;
var _startY = 0;
var _offsetX = 0;
var _offsetY = 0;
var _dragElement;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
function OnMouseDown(event){
document.onmousemove = OnMouseMove;
_startX = event.clientX;
_startY = event.clientY;
_offsetX = document.getElementById('div1').offsetLeft;
_offsetY = document.getElementById('div1').offsetTop;
_dragElement = document.getElementById('div1');
}
function OnMouseMove(event){
_dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + event.clientY - _startY) + 'px';
}
function OnMouseUp(event){
document.onmousemove = null;
_dragElement=null;
}.div1{position:absolute; height:500px; width: 500px; z-index:1; background-color:red;}
.div2{position:absolute; top:100px; left:100px; height:100px; width:100px; z-index:2; overflow:hidden; display:block;}<div class="div2" id="div2">
<div class="div1" id="div1">
</div>
</div>回答by Kenny Cason
I found this nice JQuery plugin (Not sure if you are ok with using JQuery or not)
我发现了这个不错的 JQuery 插件（不确定您是否可以使用 JQuery）
http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html
http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html
