如何使用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

您需要包括scrollbar，track和thumb的divs，并在CSS中赋予它们高度属性。还包括视口和概述divs：

<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();