如何优雅地从 Jquery 轮播降级为 css 滚动列表

Question

更新

我将这两行添加到下面的脚本中：我运行了调试器，执行似乎正在删除属性，但网页继续显示滚动条。

       $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");

---

<script type="text/javascript" language="javascript">
    $(function () {

        $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            visible: 1,
            auto: 1,
            speed: 8000,
            circular: true
        });
        $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");
    });
</script> 

-- IE8 是我现在最关心的问题 --

您好，在我们的主页上有一个垂直滚动的轮播。我想做的是，如果关闭 javascript，让它优雅地无法仅使用 css。因此，结果是带有垂直滚动条的文本，用户可以单击并拖动以在列表中移动。类似于您在 textarea 元素上发现的内容，它有太多数据无法一次显示。

链接到主页。 http://beta.sc-pa.com/home/pasite-home.asp

完成后。

Answer 1

我将从一个无需 JavaScript 的解决方案开始，然后应用滚动轮播，并在必要时操作 DOM。基本概念很简单：带有 overflow-y: auto 的固定高度容器

<style>
#foo {
    width: 100px;
    height: 150px;
    overflow-y: scroll;
}
#foo.carouselled {
    overflow: hidden;
}
</style>

<script>
$(function() {
    $('#foo').jCarouselLite({
        vertical: true,
        visible: 1,
        auto: 1,
        speed: 8000,
        circular: true
    }).addClass('carouselled');
});
</script>

<div id="foo">
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
</div>

请参阅示例< /a>.

样式是 CSS 值，而不是直接归因于元素，要使用 jQuery 操作样式，请使用 css() 函数。