javascript - 如何在 iScroll 中为滚动条设置动态宽度？

Question

在这个例子中http://bit.ly/t2ImYS所有元素的包装宽度都是固定的8520px

#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}

我要width动态的，所以如果我在 <div id="scroller"> 中添加更多元素这个 #scroller 应该采用其中元素的宽度。

于是尝试设置宽度

#scroller {
    width: 100%;}

和

 #scroller {
    width: auto}

但是滚动条无法正常工作。

有没有办法得到width在 %卷轴正常工作？

Answer 1

• 将li元素设置为display:inline-block;并删除 float :左； (您也可以删除垂直对齐，因为它只适用于表格单元格元素)

• 从包装器中移除固定宽度。

• 添加空白:nowrap；到 ul

• 你应该没问题...

(<=ie7 除外，但我想这对您来说没有问题？)

#scroller li {
    display: inline-block;/* changed */
    /*float:left; */   /* deleted */
    padding: 0 10px;
    width: 120px;
    height: 100%;
    border-left: 1px solid #CCC;
    border-right: 1px solid white;
    background-color: #FAFAFA;
    font-size: 14px;
}
#scroller ul {
    list-style: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    white-space:nowrap; /* added */
}
#scroller {
    /* width: 8520px; */   /* deleted */
    height: 100%;
    float: left;
    padding: 0;
}