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.

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

and the html is:

<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!

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.

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.

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

and the html is:

<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!

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.

• javascript
• scroll
• draggable

• You're missing a 2nd </div> in your HTML. – gen_Eric Commented Aug 2, 2011 at 15:20
• you also need overflow:scroll; in the div2 css :P – Joseph Marikle Commented Aug 2, 2011 at 15:25
• The scroll bars show up without that so it actually doesn't need it. Thanks anyway though. – EJay Commented Aug 2, 2011 at 15:33
• ah... must be chrome then. it just overflows and doesn't show scroll bars – Joseph Marikle Commented Aug 2, 2011 at 15:50
• Got ya. I'm working in firefox only. I'll add that to the question. – EJay Commented Aug 2, 2011 at 15:52

2 Answers 2

This works...I'd started making it for mobile safari before you cited FireFox...so it may have a little extra...

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>

I found this nice JQuery plugin (Not sure if you are ok with using JQuery or not)

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