FTScroller - 下にスクロールしない

Question

私のプロジェクトでは、FTScrollerプラグインを実装したアイテムのリストがあります。しかし、私がこのリストの一番下までスクロールすると、スクロールはその位置に固定されません。

どうすればこの問題を解決できますか？私は間違っているの？

HTML

<div class="container"> 
    <div id="boxesScroll"> 

    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">A</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item A</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">B</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item B</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">C</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item C</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">D</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item D</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">E</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item E</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">F</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item F</span> 
     </div> 
    </div>            
    <div class="boxItem"> 
     <div class="box-icon"> 
     <span class="roundedDescIcon">G</span> 
     </div> 
     <div class="box-count"> 
     <span class="description">Item G</span> 
     </div> 
    </div>  

    </div> 
</div> 

JS

$(document).ready(function() { 

    var scrollBehaviours = { 
     scrollingY: true, 
     scrollingX: false, 
     alwaysScroll: true, 
     scrollbars: true 
    }; 

    var scrollerPartidos = new FTScroller(document.getElementById('boxesScroll'), scrollBehaviours); 
}); 

CSS

.container 
{ 
    width: 195px; 
    display: inline-block; 
    vertical-align: top; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
    white-space: nowrap; 
    float: initial; 
    background: lightblue; 
} 

#boxesScroll 
{ 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
} 

.boxItem 
{ 
    float: initial; 
    border: 0px!important; 
    display: block; 
    padding: 15px; 
    background: white; 
    margin: 10px; 
    cursor: pointer; 
} 
.boxItem .box-icon { 
    float: left; 
    padding-top: 5px; 
} 
.boxItem .box-icon span.roundedDescIcon { 
    padding: 8px; 
    border-radius: 50%; 
    border: 1px solid #ced5de; 
    background: #f7f9fb; 
} 
.boxItem .box-count { 
    padding: 0px 10px; 
    width: calc(100% - 50px); 
    display: inline-block; 
    vertical-align: top; 
} 
.boxItem .box-count .description { 
    font-size: 17px; 
    line-height: 30px; 
    vertical-align: middle; 
    float: left; 
    width: 100%; 
} 

.ftscroller_scrollbary, 
.ftscroller_scrollbarx { 
    -moz-opacity: .2; 
    -khtml-opacity: .2; 
    -webkit-opacity: .2; 
    opacity: .2; 
    -ms-filter: alpha(opacity=.2 * 100); 
    filter: alpha(opacity=.2 * 100); 
} 

JSFiddle example

Answer 1

あなたはftscroller要素に高さを必要とする

#boxesScroll 
{ 
    width: 100%; 
    height: 200px; 
    position: absolute; 
    overflow: hidden; 
}