[英]FTScroller - not fixing scroll to the bottom
在我的項目中,我有一個實現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);
}
你需要ftscroller元素的高度
#boxesScroll
{
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.