如何在 iScroll 中设置滚动条的动态宽度？

发布于 2024-12-20 18:10:54 字数 544 浏览 6 评论 0原文

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

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

我想要width 动态，因此如果我在

内添加更多元素，则此 #scroller 应采用其中元素的宽度。

因此尝试设置宽度

#scroller {
    width: 100%;}

，

 #scroller {
    width: auto}

但滚动器无法正常工作。

有没有办法在滚动正常的情况下获得 % 中的 width ？

原文

In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px

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

I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.

So tried to set width

#scroller {
    width: 100%;}

and

 #scroller {
    width: auto}

but then scroller doesn't work properly.

is there a way to get width in % with properly working scroll?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

糖粟与秋泊 2024-12-27 18:10:54

设置li元素为display:inline-block;并删除浮动：左；（您也可以删除垂直对齐，因为它仅适用于表格单元格元素）
从包装器中删除固定宽度。
添加空白：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;
}

Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
Remove the fixed width from the wrapper.
Add white-space:nowrap; to the ul
And you should be fine...

(Except in <=ie7, but I suppose that's no problem in your case?)

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

回复收藏 0 原文

半步萧音过轻尘 2024-12-27 18:10:54

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

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

回复收藏 0 原文

櫻之舞 2024-12-27 18:10:54

使用显示：内联块
使用百分比对我有用：

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

Using Display:inline-block
and using percentages worked for me:

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

回复收藏 0 原文

萌吟 2024-12-27 18:10:54

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

回复收藏 0 原文

呆橘 2024-12-27 18:10:54

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

try this css code, it worked for me: 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;
            }

回复收藏 0 原文

~没有更多了~