如何设置滚动条的动态宽度

How to set dynamic width in iScroll for scroller?

本文关键字：动态 滚动条 何设置 设置      更新时间：2023-09-26

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

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

我想让width是动态的，所以如果我在<div id="scroller">中添加更多的元素，这个#滚动条应该取其中元素的宽度。

所以尝试设置width

#scroller {
    width: 100%;}

和

 #scroller {
    width: auto}

但是滚动条不能正常工作

是否有办法在%中获得width，并正常工作?

  • 设置li元素显示为:inline-block;并移除浮动:left;(您也可以删除垂直对齐，因为这只适用于表格单元格元素)

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

  • 添加空白:nowrap;}

  • 你应该很好…

(除了<=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;
}

如果你正在使用iScroll4，你应该刷新滚轮或销毁并重新创建它。

节选自这里:isscroll需要知道包装器和滚动条的正确尺寸。它们是在启动时第一次计算的，但是如果您的代码改变了元素的大小，则需要警告isroll您正在扰乱DOM。"

Using Display:inline-block使用百分比对我来说很有效:

#scroller li {
 height: 100%;
 width: 2%;
 display: inline-block;
}
#scroller ul {
 list-style: none;
 display: block;
 float: left;
 width: 100%;
 height: 100%;
}
#scroller {
 width: 5000%;
 height: 100%;
 float: left;
}

尝试在滚动条中添加动态项后调用iscroll refresh()方法来设置宽度

试试这个css代码，它为我工作:http://jsfiddle.net/manseuk/r9VL2/2/ 

#wrapper {
                 z-index:1;
                width:100%;
                background:#aaa;
                overflow:auto;
            }
            #scroller {
               z-index:1;
            /*    -webkit-touch-callout:none;*/
                -webkit-tap-highlight-color:rgba(0,0,0,0);
                width:100%;
                padding:0;
            }
            #scroller ul {
                list-style:none;
                padding:0;
                margin:0;
                width:100%;
                text-align:left;
            }
            #scroller li 
            {
                background-color: White !important;
                padding:0 10px;
                height:40px;
                line-height:40px;
                border-bottom:1px solid #ccc;
                border-top:1px solid #fff;
                background-color:#fafafa;
                font-size:14px;
            }
相关文章：