ansaurus

Question

Help me understand scrolling in javascript(jquery) terms.

Answer 1

A:

Something like

$(window).scrollTop(someNumberHere);

perhaps?

It would help if you could clarify exactly what you mean by "I want to ... scroll the window when I click and drag with the cursor inside the window".

http://api.jquery.com/scrollTop

Matt Ball 2010-10-26 19:39:45

Example:If I click in the window and drag left 10px, I want it to scroll right 10px.

Dave 2010-10-26 19:42:57

@Dave: drag _what_ by 10px?

Matt Ball 2010-10-26 19:45:54

If I click/drag anywhere inside #container or even click/drag on #stuff, I want it to scroll #container.<div id="container" style="width: 400px; height: 400px; overflow: auto;"> <div id="stuff" style="width: 900px; height: 900px;> </div></div>

Dave 2010-10-26 19:48:35

I think scrollTop() and scrollLeft() is what I was looking for, trying out now.

Dave 2010-10-26 19:56:30

Answer 2

+2 A:

This should get you going with horizontal scrolling. Vertical would be similar, but with scrollTop().

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            var lastPageX;

            $(document).ready(function() {
                $("#inner").mousedown(function(e) {
                    // Reference to the drag pad
                    var inner = $(this);
                    // Position where mouse was pressed
                    lastPageX = e.pageX;
                    // Attach mouse move listener
                    $(inner).mousemove(function(e) {
                        var diff = lastPageX - e.pageX;
                        // Scroll based on the new curson position
                        $("#outer").scrollLeft($("#outer").scrollLeft() + diff);
                        lastPageX = e.pageX;
                    });
                    // Remove mouse move listener
                    $(window).mouseup(function() {
                        $(inner).unbind("mousemove");
                    });
                    return false;
                });
            });
        </script>
        <style>
            #outer {
                height: 400px;
                width: 400px;
                background-color: Lime;
                overflow: scroll;
            }
            #inner {
                height: 900px;
                width: 900px;
                background-color: Yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

Edit: Return false after the mousedown is handled to prevent firefox from grabbing the div.

Ed Saito 2010-10-26 20:03:21

[jsfiddle demo](http://jsfiddle.net/8yL7Y/) :)

Matt Ball 2010-10-26 20:07:35

ansaurus

tags:

views:

answers:

Help me understand scrolling in javascript(jquery) terms.

related questions