JQuery ScrollLeft()不起作用

时间:2013-04-03 15:58:43

标签: jquery scrollbar news-ticker

我遇到了JQuery中的scrollLeft()函数问题。我基本上试图创建一个这个jsFiddle(http://jsfiddle.net/2RRWS/)的分支,这是一个垂直的新闻自动收报机。

我需要一个可以滚动的类似脚本。我能够生成一个水平滚动条,但我无法通过scrollLeft函数控制它。

任何想法我做错了什么?

var $container = $("#scrollContainer");
$container.scrollLeft(300);

请参阅我的(非常简短)脚本:http://jsfiddle.net/RA52y/

1 个答案:

答案 0 :(得分:0)

1 - 在项目中包含jQuery(这不包括在小提琴中) - 确保js在文档准备好的情况下运行

2 - 修改html如下:

<div id="scrollContainer">

    <div id="content" style="white-space:nowrap; padding-left:600px;">134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355 134 1234 1234 12355</div>

</div>

3 - 使用此js:

var $container = $("#scrollContainer");
var $content = $("#content");

 containerWidth = $container.width();
 contentWidth = $content.outerWidth();

 contentLeft = 0;
 scrollLeft = 0;

 setInterval(function() {
    if (scrollLeft > contentWidth + containerWidth)
        scrollLeft = 0;
    $container.scrollLeft(scrollLeft++);

}, 20);

在你的jsfiddle之后,它对我来说很好。