Question

我正在尝试使用插件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开始，我正在努力学习。

Answer 1

我会用类来计算元素的数量：

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

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

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

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

Answer 2

感谢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标记，我告诉li元素div，它对语义更好。感谢您提示; - ）

如何从类中实现多个tinyscrollbars？

2 个答案: