javascript – 如何从类中实现多个tinyscrollbars？

2019年8月3日 230次阅读

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

最佳答案 我会计算该类的元素数量：

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

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

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

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

点赞