jquery - 如何使用 Tinyscrollbar？

Question

我有点困惑如何使用 tinyscrollbar 插件，我尝试像这样使用它：

<div>
Lorem ipsum ...
</div>

$('div').tinyscrollbar();​

但有一个例外，请参阅这个小提琴：http: //jsfiddle.net/timbuethe/Kgt7c/。源看起来找不到它按类搜索的视口对象：

oViewport   = { obj: $( '.viewport', root ) }

而且我没有看到任何创建此元素的代码。我是否必须提供一堆元素（例如“视口”、“滚动条”等）才能使用这个插件？有人跑过这个吗？

Answer 1

让它工作http://jsfiddle.net/timbuethe/Kgt7c/25/你真的必须包括额外的标记......

  <div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div>            </div></div>
    <div class="viewport">
        <div class="overview">
          (...)

        </div>
    </div>
  </div>

Answer 2

您需要为滚动条、轨道和拇指包含 div，并在 css 中为它们提供高度属性。还包括视口和概览 div：

<div id="scroll">                                                                
    <div class="scrollbar">
        <div class="track">
            <div class="thumb">
                <div class="end"></div>
            </div>
        </div>
    </div> 
     <div class="viewport">                                                                                             </div>
         <div class="overview"> 
             Content here
         </div>
     </div>
</div>

然后，调用：

 $('#scroll').tinyscrollbar();