如何从一个类实现多个微小滚动条

How to implement multiple tinyscrollbars from a class?

本文关键字：实现 滚动条 一个      更新时间：2023-09-26

我正在尝试使用插件Tinyscrollabr实现多个滚动条.jshttp://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');
})

但是微小的滚动条需要一个id。对于类，它会加载第一个滚动条，而不是其他滚动条。Firebug 返回此错误消息"f.obj[0] 未定义"

抱歉，如果我的问题很愚蠢，但是我该怎么做才能将微小的滚动条应用于带有类的元素列表？

然后，经过一些操作，如何使用函数 $allScrollbars.tinyscrollbar_update（） 更新所有这些滚动条;

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

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

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

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

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

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

感谢 KneeSkrap3r 的回答。这是一个很好的解决方案，但我正在尝试做一些事情，以防我不知道要滚动的元素数量。我想我已经找到了这样的东西（这是我正在尝试做的第一个 jquery 插件的一部分），其中$el都是带有类"scrollbox"的枚举。

$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 元素，它对语义更好。感谢您的提示;-）

相关文章：