Как установить динамическую ширину в iScroll для скроллера?

Question

Как установить динамическую ширину в iScroll для скроллера?

В этом примере 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 в % с правильно работающим свитком?

5

javascript css mobile-safari iscroll4

Источник

user84201 12 дек '11 в 08:01

5 ответов

Другие вопросы по тегам javascript css mobile-safari iscroll4

user983836 12 дек '11 в 09:35 2011-12-12 09:35 · Answer 1 · 2011-12-12 09:35

Установите элементы li для отображения:inline-block; и удалить поплавок: слева; (вы также можете удалить вертикальное выравнивание, так как это будет работать только с элементами ячейки таблицы)
Снимите фиксированную ширину с обертки.
Добавить пробел: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;
}

user1156525 03 дек '12 в 16:28 2012-12-03 16:28 · Answer 2 · 2012-12-03 16:28

Использование 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;
}

2

Источник

user1156525 03 дек '12 в 16:28

user1094018 24 янв '12 в 09:24 2012-01-24 09:24 · Answer 3 · 2012-01-24 09:24

Если вы используете iScroll4, вы должны обновить скроллер или уничтожить и воссоздать его.

Отсюда: "iScroll необходимо знать правильные размеры как оболочки, так и скроллера. Они вычисляются при первом запуске, но если ваш код меняет размер элементов, iScroll следует предупредить, что вы работаете с DOM ".

user850234 23 май '12 в 05:57 2012-05-23 05:57 · Answer 4 · 2012-05-23 05:57

Попробуйте позвонить в iscroll refresh() метод после добавления динамических элементов в скроллере для установки ширины.

1

Источник

user850234 23 май '12 в 05:57

user1478221 12 май '13 в 21:41 2013-05-12 21:41 · Answer 5 · 2013-05-12 21:41

Попробуйте этот код 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;
            }