Scroll DIV when mouse button is down

**Laerion** · 10-04-2010, 06:23 PM

Hi! I've a DIV which contains an IMG. This image is wider than the div, so a scrollbar appears on page. What I want to do, is click on the div(image) and move the mouse, and scroll the div as I move the mouse.

I've tried using event ondrag in the div, and inside I can move the scroll with scrollTop and/or scrollLeft. My problem is that I haven't been able to make a good algorithm.

I've tried to add clientY to scrollTop, and many other combinations but can't make it work. I have a lot of other javascript functionality in the page that is working.

Any ideas? Please! I am stuck in this for days

**ctoz** · 10-04-2010, 08:41 PM

try jQuery UI 'draggable', works like a charm.

**Laerion** · 10-05-2010, 09:11 AM

Hi! I've seen your recommendation, but that code is for dragging the image. I don't want to move (or dragg) the image in my div, I only want to move the scrolls, but not the image.

**Sterling Isfine** · 10-05-2010, 09:44 AM

Originally Posted by Laerion

Hi! I've a DIV which contains an IMG. This image is wider than the div, so a scrollbar appears on page. What I want to do, is click on the div(image) and move the mouse, and scroll the div as I move the mouse.

I'm not certain exactly what you envisage but try this script which doesn't require a click to start it:

**Laerion** · 10-05-2010, 11:26 AM

Hi! I managed to solve my issue, and here is the very simple code that I wrote, hope it usefull for some of you:

HTML Code:

<html>
    <body>
        <div id="scroller" style="width:500px; height: 500px;overflow:auto;">
			<img src="imgmng/dosmilxdosmil.JPG" width="1000px" height="1000px"/>
        </div>
    </body>
    <script>
    	var scroller = document.getElementById("scroller");
    	var posYact=0, posYant = 0, posXact = 0, posXant = 0;
    	var posYorg = 0, posXorg = 0;
    	var scrolling = null;
    	scroller.ondrag = function(){    	
    		if(posYorg == 0)
    			posYorg = event.clientY;
    		if(posXorg == 0)
    			posXorg = event.clientX;
    				
    		posYact = event.clientY-posYorg;
    		posXact = event.clientX-posXorg;
    		//window.status = "act:"+posXact+",ant:"+posXant+",time:"+new Date().getTime();

    		scroller.scrollTop = scroller.scrollTop + (posYact-posYant);
    		scroller.scrollLeft = scroller.scrollLeft + (posXact-posXant);
    			
    		posYant = posYact;
    		posXant = posXact;
    		scrolling = window.setTimeout(function() {
            	scroller.ondrag;
        	}, 100);
    	}
    </script>
</html>

**Sterling Isfine** · 10-05-2010, 12:14 PM

Originally Posted by Laerion

Hi! I managed to solve my issue, and here is the very simple code that I wrote, hope it usefull for some of you:

I found it rather creaky and it will only work on I.E.

The following line has no effect:

Code:

scrolling = window.setTimeout(function() {
            	scroller.ondrag;
        	}, 100);

**Laerion** · 10-05-2010, 12:31 PM

Yes, it'll work only in IE for now, and that's what I need. I noticed that the timeout had no effect.

What suggestions you have for improving the code? Forget about Firefox, I only want it to work better on IE.