如何在 iScroll 中为滚动条设置动态宽度？答案

【问题标题】：How to set dynamic width in iScroll for scroller?如何在 iScroll 中为滚动条设置动态宽度？
【发布时间】：2012-01-18 06:34:36
【问题描述】：

在这个例子中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？

【问题讨论】：

标签： javascript css mobile-safari iscroll4

【解决方案1】：

将 li 元素设置为 display:inline-block;并删除浮动：左；（您也可以删除垂直对齐，因为这仅适用于表格单元格元素）
从包装器中移除固定宽度。
添加空格：nowrap；到ul
你应该没事……

（除了

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

【讨论】：

它应该可以工作，当我在 firebug 中测试时它可以工作。但是，我的意思是“从滚动条中删除固定空间”（不是包装器）
你的意思是从#scroller {width: 8520px}更改删除宽度8250px
我也不能让它工作，除非我有固定的宽度，否则不能工作
@tcurdt ：您需要在加载内容后计算宽度。您可以通过$('.content').length*$('.content').width() 执行此操作。这将根据项目的数量设置宽度，并且固定宽度问题也将得到解决。但是您需要设置宽度，否则 iscroll 将不起作用。此方法可帮助您在 iscroll 内动态更改内容时设置宽度
键可能是滚动条上的float: left。没有它，Javascript 无法正确确定宽度。

【解决方案2】：

如果您使用的是 iScroll4，则应刷新滚动条或销毁并重新创建它。

摘自here： “iScroll 需要知道包装器和滚动器的正确尺寸。它们是在启动时第一次计算的，但如果您的代码更改了元素大小，则需要警告 iScroll 您正在弄乱 DOM。”

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

试试这个 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;
            }

【讨论】：