4

我正在尝试使用插件 Tinyscrollabr.js http://baijs.nl/tinyscrollbar/实现多个滚动条

为了实现滚动条，我使用了类似本文中的函数 scrollify：http: //www.eccesignum.org/blog/making-tinyscrollbarjs-easier-to-implement

HTML：

<ul id="myList">
<li id="scrollbar1" class="col">
  <h2>Title 01</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>

<li id="scrollbar2 class="col">
  <h2>Title 02</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>

<li id="scrollbar3 class="col">
  <h2>Title 03</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>
</ul>

Javascript：

function scrollify(element,options) {   //  '#element', {list:of,key:values}
 var opt = options || {}
     $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
     $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
     $(element).tinyscrollbar(options);}

$scrollbar1 = $('#scrollbar1 .scrollBox') ;
$scrollbar2 = $('#scrollbar2 .scrollBox');
$scrollbar3 = $('#scrollbar3 .scrollBox');
$scrollbar4 = $('#scrollbar4 .scrollBox');

$(function() {
scrollify($scrollbar1);    
scrollify($scrollbar2);   
scrollify($scrollbar3);   
scrollify($scrollbar4);

})

我想让这更简单。例如，我将能够做到这一点：

$(function() {
scrollify('.scrollBox');
})

但是 tinyscrollbar 需要一个 id。使用一个类，它加载第一个滚动条而不是其他滚动条。Firebug 返回此错误消息“f.obj[0] 未定义”

抱歉，如果我的问题很愚蠢，但是如何将 tinyscrollbar 应用于具有类的元素列表？

然后，在一些操作之后，如何使用函数 $allScrollbars.tinyscrollbar_update(); 更新所有这些滚动条；

感谢您的帮助，我刚开始使用 javascript，我正在努力学习。

4

2 回答 2

1

感谢 KneeSkrap3r 的回答。这是一个很好的解决方案，但我正在尝试做一些事情，以防我不知道要滚动的元素数量。我想我发现了这样的东西（它是我尝试做的第一个 jquery 插件的一部分），其中 $el 是所有带有类“滚动框”的元素。

$el.each(function(index)
            {
                var $scrolls = $(this);


                function scrollify(element,options)
                {   //  '#element', {list:of,key:values}
                    var opt = options || {}
                    $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
                    $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
                    $(element).tinyscrollbar(options);
                }
                scrollify($scrolls);

                // Update heights
                $(window).resize(function()
                {   $scrolls.tinyscrollbar_update('relative');
                });
            })

像这样，它似乎有效，但我不知道我是否正在使用 javascript 的良好实践。对于 Html 标记，我告诉了 div 的 li 元素，这对语义更好。感谢您的提示；-)

于 2012-09-05T09:23:41.187 回答
1

我会计算类的元素数量：

var scrollCount = $(".scrollbox").size();

然后使用迭代循环调用您的每个 ID：

for (i=0; i<5; i++)  {
   scrollify($('#scrollbar' + i));
}

此外，我建议使用 DIV 而不是您拥有的列表设置，使用您共享的链接中的示例作为起点:)

于 2012-08-31T19:44:42.143 回答