Javascript 使用jQuery反向滚动元素_Javascript_Jquery_Html_Jquery Ui

Javascript 使用jQuery反向滚动元素

javascript jquery html jquery-ui

Javascript 使用jQuery反向滚动元素,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,已找到以下问题的解决方案：以下是特别感谢我一直在jquery中研究反向滚动，需要帮助。我的东西/代码：实现： <div id="test"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convalli

已找到以下问题的解决方案：以下是

特别感谢

我一直在jquery中研究反向滚动，需要帮助。我的东西/代码：

实现：

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>

#track {
    height: 400px;
    width: 48px;
    overflow: hidden;
    margin: 10px 0 0 10px;
    background:#ccc;
    float:left;
}
#rocket{
    height:48px;
    width:48px;
    background:#ccc url('http://www.veryicon.com/icon/preview/System/GANT%203/Rocket,%20This%20is%20a%20damn%20good%20Icon.jpg');

}

$(document).ready(function() {
    $(function() {
        var left = parseInt($('#track').css('margin-left'), 10);
        var top = parseInt($('#track').css('margin-top'), 10);
        $("#rocket").draggable({
            containment: "#track",
            axis: "y",
            scroll: false,
            drag: function(event, ui) {
                // Show the current dragged position of image
                var currentPos = $(this).position();
                $("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
            }
        });
    });
});

当内容向下滚动时，火箭向上移动

问题：

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>

#track {
    height: 400px;
    width: 48px;
    overflow: hidden;
    margin: 10px 0 0 10px;
    background:#ccc;
    float:left;
}
#rocket{
    height:48px;
    width:48px;
    background:#ccc url('http://www.veryicon.com/icon/preview/System/GANT%203/Rocket,%20This%20is%20a%20damn%20good%20Icon.jpg');

}

$(document).ready(function() {
    $(function() {
        var left = parseInt($('#track').css('margin-left'), 10);
        var top = parseInt($('#track').css('margin-top'), 10);
        $("#rocket").draggable({
            containment: "#track",
            axis: "y",
            scroll: false,
            drag: function(event, ui) {
                // Show the current dragged position of image
                var currentPos = $(this).position();
                $("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
            }
        });
    });
});

当火箭向上拖动时，内容必须向下滚动

将“包容”添加到可拖动组件似乎不起作用

这必须与隐藏的溢出一起工作

对于没有小提琴的人：

HTML:

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>

#track {
    height: 400px;
    width: 48px;
    overflow: hidden;
    margin: 10px 0 0 10px;
    background:#ccc;
    float:left;
}
#rocket{
    height:48px;
    width:48px;
    background:#ccc url('http://www.veryicon.com/icon/preview/System/GANT%203/Rocket,%20This%20is%20a%20damn%20good%20Icon.jpg');

}

$(document).ready(function() {
    $(function() {
        var left = parseInt($('#track').css('margin-left'), 10);
        var top = parseInt($('#track').css('margin-top'), 10);
        $("#rocket").draggable({
            containment: "#track",
            axis: "y",
            scroll: false,
            drag: function(event, ui) {
                // Show the current dragged position of image
                var currentPos = $(this).position();
                $("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
            }
        });
    });
});

JS（jquery1.8.2和jqueryui）：

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>

#track {
    height: 400px;
    width: 48px;
    overflow: hidden;
    margin: 10px 0 0 10px;
    background:#ccc;
    float:left;
}
#rocket{
    height:48px;
    width:48px;
    background:#ccc url('http://www.veryicon.com/icon/preview/System/GANT%203/Rocket,%20This%20is%20a%20damn%20good%20Icon.jpg');

}

$(document).ready(function() {
    $(function() {
        var left = parseInt($('#track').css('margin-left'), 10);
        var top = parseInt($('#track').css('margin-top'), 10);
        $("#rocket").draggable({
            containment: "#track",
            axis: "y",
            scroll: false,
            drag: function(event, ui) {
                // Show the current dragged position of image
                var currentPos = $(this).position();
                $("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
            }
        });
    });
});

首先，干得好

我不认为你的解决方案牵强。基本上你需要使用

$("#test").scrollTop((top - currentPos.top)*cr);

设置div测试的滚动顶部。我用的方程式不准确，但你可以相应地改变它

希望这能给你带来线索：

演示：

为了解决这些问题，我对您的代码做了一些更改：

将“包容”添加到可拖动组件似乎不起作用

 var draggingRocket = false;
   $("#test").scroll(function(event) {
       if(!draggingRocket){
            var st = $(this).scrollTop();
            var pos = iHeight - (st / cr);
            $("#rocket").css("top", pos);
       }
   });


    //rocket drag
    $("#rocket").draggable({
        containment: $('#track'),
        axis: "y",
        scroll: false,
        start: function(event, ui) {
            draggingRocket = true;
        },
        drag: function(event, ui) {
            // Show the current dragged position of image
            var currentPos = $(this).position();
            $("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
            $("#test").scrollTop(currentPos.top);    
        },
        stop: function(event, ui) {
            draggingRocket = false;
        }
    });

您好，jonhkr谢谢您的快速回复，您能给我一把小提琴吗？我无法让它工作。这是小提琴，但您需要制作函数来计算scrollTop$（“#测试”）。scrollTop（/*您的函数*/）；谢谢你，伙计，完成了：）这是我刚才对问题所做的编辑，把你联系起来了：）谢谢@pulkit Mittal，但必须先设置遏制，这样滚动就不会乱动，jonhkr解决方案也能帮我解决问题。谢谢你帮我。