帮助我理解javascript（jquery）术语中的滚动_Javascript_Jquery_Jquery Ui_Scroll

帮助我理解javascript（jquery）术语中的滚动

javascript jquery jquery-ui scroll

帮助我理解javascript（jquery）术语中的滚动,javascript,jquery,jquery-ui,scroll,Javascript,Jquery,Jquery Ui,Scroll,当你滚动时，你在改变某物的位置吗如何更改滚动条的位置？专门用于匹配光标移动我想做的是当我在窗口内单击并拖动光标时滚动窗口例如：我有一个400px乘400px的div，里面有一个900px乘900px的div。我想通过单击和拖动来滚动。注意，我不想移动inside div的位置（通过draggable使用jqueryui很容易实现），只想移动滚动位置。移动实际的div位置会弄乱我的其他javascript应用程序任何帮助都将不胜感激！谢谢这应该可以让你进行水平滚动。垂直方向与此类似，但

当你滚动时，你在改变某物的位置吗

如何更改滚动条的位置？专门用于匹配光标移动

我想做的是当我在窗口内单击并拖动光标时滚动窗口

例如：我有一个400px乘400px的div，里面有一个900px乘900px的div。我想通过单击和拖动来滚动。注意，我不想移动inside div的位置（通过draggable使用jqueryui很容易实现），只想移动滚动位置。移动实际的div位置会弄乱我的其他javascript应用程序

任何帮助都将不胜感激！谢谢

这应该可以让你进行水平滚动。垂直方向与此类似，但使用scrollTop（）


var lastPageX；
$（文档）.ready（函数（）{
$（“#内部”）.mousedown（函数（e）{
//对拖曳板的引用
var-inner=$（这个）；
//鼠标被按下的位置
lastPageX=e.pageX；
//附加鼠标移动侦听器
$（内部）.mousemove（函数（e）{
var diff=lastPageX-e.pageX；
//基于新光标位置滚动
$（“#外部”）.scrollLeft（$（“#外部”）.scrollLeft（）+diff；
lastPageX=e.pageX；
});
//删除鼠标移动侦听器
$（窗口）.mouseup（函数（）{
$（内部）.unbind（“mousemove”）；
});
返回false；
});
});
#外{
高度：400px；
宽度：400px；
背景色：石灰；
溢出：滚动；
}
#内在的{
高度：900px；
宽度：900px；
背景颜色：黄色；
}

Edit：在处理mousedown后返回false，以防止firefox抓取div。

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