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;  
}

FTScroller - 没有将滚动固定到底部

1 个答案: