可以通过 jQuery 使用 ul 和 li 进行垂直滚动吗？答案

【问题标题】：Can vertical scrolling with ul and li be done via jQuery?可以通过 jQuery 使用 ul 和 li 进行垂直滚动吗？
【发布时间】：2011-09-19 14:33:11
【问题描述】：

例如：http://www.net-a-porter.com/product/163606

到目前为止我的代码：

<style type="text/css">
li {float:left;height:50px}
</style>
<div style="height:100px">
    <a href="#" class="top">up</a>
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
    </ul>
    <a href="#" class="down">down</a>
</div>

【问题讨论】：

标签： jquery vertical-scrolling

【解决方案1】：

您可以使用overflow:hidden 将内部UL 发布到div 中，并上下移动内部UL 的位置，从而创建一种滚动效果。

【讨论】：

是的，这正是他链接到的网站正在做的事情。
我没有看链接，但是是的 - 似乎或多或少是一样的 :)
你能给我举个例子吗？就像按钮上的 jQuery 函数一样？我知道你需要使用 $('.up').click(function(e){
我认为对于这个特定目的，使用 jQuery Carousell 会是最快的。 sorgalla.com/projects/jcarousel/#Examples
非常感谢！严重地。太感谢了。对此，我真的非常感激。谢谢！

【解决方案2】：

@Shai。你知道为什么这不起作用。我正在找出是否有超过三个 LI 而不是显示箭头。否则不显示箭头：

jQuery(document).ready(function() {
var ulx;
var totalli;
ulx     = document.getElementById("mycarousel");
totali  = ulx.children.length;
if (totali > 3){
        $(".jcarousel-next").hide();
        $(".jcarousel-prev").hide();
    }else{
        // buttons appear
    }
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});

已更新 - 解决方案：

jQuery(document).ready(function() {
var ulx     =   document.getElementById("mycarousel");
var totalli =   ulx.children.length;
if (totalli > 3) { 
    jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
} else {
    jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
    $(".jcarousel-next").hide();$(".jcarousel-prev").hide();
}
});

【讨论】：

在您的解决方案中，在 }else{ 中我没有看到 jCarousel() 函数的原因，因为您隐藏了箭头。除此之外它看起来不错:)
基本上，如果我不把它放进去...... Carosel 不会出现（UL 使用该命令自动分配给它的样式 - 所以我的 CSS 依赖于它）我上面的脚本只是隐藏箭头，但仍将轮播显示在适当的位置，因为 CSS 和代码依赖于它。感谢您的帮助。