如何通过拖动而不是使用滚动条来滚动 div答案

【问题标题】：How to scroll through a div by dragging and not by using the scroll bars如何通过拖动而不是使用滚动条来滚动 div
【发布时间】：2011-10-18 08:47:24
【问题描述】：

我正在做一个使用触摸屏界面的项目。我在一个较小的 div 中有一个 div，所以较小的 div 有滚动条来访问第一个 div 的其余部分。这是它的基本代码。

.div1{
      height: 100px;
      width: 100px;
}
.div2{
      height: 50px;
      width: 50px;
}

html 是：

<div id = "div2" class="div2">
 <div id="div1" class="div1"></div>
</div>

使用 javascript，我希望能够通过按下（因为它是触摸屏）屏幕的未占用部分并沿 div 拖动来滚动 div2。基本上，当您单击并拖动它时，滚动功能的行为方式与谷歌地图的行为方式相同。有人可以帮我吗？提前致谢！

注意

对于鼠标动作来说，按下就相当于点击这里，要明确一点。我也只在 Firefox 中工作，所以跨浏览器兼容性不是问题。

【问题讨论】：

您的 HTML 中缺少第二个 </div>。
你还需要在 div2 css 中使用overflow:scroll; :P
滚动条没有显示，所以它实际上不需要它。不过还是谢谢。
啊...那一定是chrome。它只是溢出并且不显示滚动条
知道了。我只在Firefox中工作。我将把它添加到问题中。

标签： javascript scroll draggable

【解决方案1】：

这行得通...在您引用 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>

【讨论】：

您可能需要添加一些限定符，这样它就不会被滚动出视图
不错。您是偶然从在线教程中获得的吗？我在 div 中放置的按钮的代码几乎完全相同，但我不确定它是否适用于 div。另外，如果我从我的 javascript 调用它并且不想将 JS 放在我的 html 中，document.getElementById("div1") 是否与仅使用文档相同？感谢您的回复！
在某些时候是的，但为此我只是退出了我的项目......我认为其中一些来自 developer.apple.com。我刚刚搜索了_dragElement，发现这个似乎非常相似，所以我确定我读过这个，或者其他人的端口（如果这不是复制别人本身:)）：luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx（我在选择变量名时通常不使用下划线）
在使用单独的JS文件时仍然可以使用document.getElementById

【解决方案2】：

我发现了这个不错的 JQuery 插件（不确定你是否可以使用 JQuery）

http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html

【讨论】：

JQuery 不是一个选项。不过感谢您的回复。