Question

我正在尝试使用scrollTo插件的一个非常简单的实现：

但我无法让它发挥作用。知道为什么它不是水平滚动显示列表中的下一个图像吗？

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('ul#scrollThis').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; width: 50px; height: 50px; overflow: hidden; }
ul li { float: left; }

</style>

<ul id="scrollThis">
    <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
    <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
    <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>

<a href="" class="next">Next >></a>

Answer 1

问题是您分配给ul的宽度。足以容纳一个li就足够了。因此，即使您已将li设置为float:left，其余ul也会被包裹下来。

你需要的是在li周围有一个包装器div，它应该具有单个ul项目所需的高度和宽度。 li的宽度应该是所有scrollTo的总宽度。执行此操作后，在包装器div上应用{{1}}插件。

正在使用 demo

Answer 2

忘记插件一秒钟，你正在使用无序列表，所以图像实际上是一个接一个地垂直，而不是水平。你可以通过删除overflow：hidden css样式来看到这一点。

所以你有一个垂直列表（沿着Y轴）并且你锁定插件只是滚动x轴。如果删除{axis：'x'}参数，您将看到它垂直滚动。

如果您希望它水平滚动，那么您只需要更改您的CSS以使UL一个接一个地水平显示。

<强>更新

要实现水平对齐的项目（以及水平滚动），您需要将UL更改为足够宽以便并排容纳所有项目（如果您限制UL的宽度，它将只推送项目到下一行），并将 white-space 设置为 nowrap 。

然后将LI设置为 display：inline （或者你可以使用 float：left 我相信）。

现在你有并排的项目，你需要裁剪视图，所以只显示一个。为此，将UL包装在容器div中并在此设置 width 和 height ，这样只显示一个项目并且溢出到隐藏

最后更改你的scrollto，告诉容器不滚动列表。

这应该达到你所追求的结果。

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('#container').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; white-space: nowrap; width: 70000px; }
ul li { display: inline; }
#container { width:50px; height:50px; overflow:hidden;  }

</style>

<div id="container">
    <ul id="scrollThis">
        <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
        <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
        <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
    </ul>
</div>

<a href="" class="next">Next >></a>

Answer 3

主要问题是flesler警告你必须重新上传那个js文件...试试我自己的插件

http://jsfiddle.net/TPQyY/6/

工作正常

(function($){
        $.fn.scrollTo = function(minus){
                if (!minus) minus = 0;
                var container = $("body");
                var scrollTo = $(this);
                if (scrollTo && container){
                        container.animate({
                            scrollTop: scrollTo.offset().top - container.offset().top - minus
                        });
                }
        }
})(jQuery);


$(function() {

     $('.next').click(function(e) {
         $('ul#scrollThis').scrollTo();    
         return false;
     });

 });

Answer 4

我是jQuery.scrollTo的创建者。我认为2个人已经正确回答了（这是一个CSS的事情）所以我不会重复它。

我只想添加它以便使用现代版本，确保可用性和一致性：

从https://github.com/flesler/jquery.scrollTo/releases下载并自行托管
托管该插件的免费CDN服务之一的热链接
- https://cdnjs.com/libraries/jquery-scrollto
- http://www.jsdelivr.com/#!jquery.scrollto（不是最新的）

为什么jQuery scrollTo（）不工作？

4 个答案: