Question

我正在开发一个使用触摸屏界面的项目。我在一个较小的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，我希望能够通过按下（因为它是一个触摸屏）滚动div2屏幕的未占用部分并沿着div拖动。基本上，滚动功能的行为与谷歌地图在您单击并拖动时的行为方式相同。任何人都可以帮我吗？提前谢谢！

注意

就鼠标操作而言，按下相当于单击此处，只是为了清楚。我也只在Firefox工作，因此跨浏览器兼容性不是问题。

Answer 1

这很有效......在你引用FireFox之前我已经开始制作它用于移动游猎了...所以它可能有一些额外的......

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>

Answer 2

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

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

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

注意

2 个答案: