All geek questions in one place

Help me understand scrolling in javascript (jquery) conditions

When you scroll, do you change the position of something?

How to change the scroll position? In particular, to fit the movement of cursors.

What I want to do is scroll the window when I click and drag the cursor inside the window.

For example: I have a 400px by 400px div with an internal size of 900px by 900px. I want to scroll click and drag. Note: I do NOT want to move the position of the inner div (easily doable using jQuery UI via draggable), just the scroll position. Moving actual messes with my other javascript applications.

Any help would be appreciated! Thank!

+3
source share
1

. , scrollTop().

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <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>

: false , mousedown , firefox div.

+3

Source: https://habr.com/ru/post/1771564/

More articles:


All Articles