Как правильно прокрутить Safari для мобильных устройств (iPad)?

0

Мне нужно обрабатывать как горизонтальную, так и вертикальную прокрутку простым способом, который работает на Safari mobile вообще и iPad в своеобразном.

У меня очень простая структура HTML/CSS, которую я хотел бы сохранить очень просто, как описано ниже.

Найдите здесь эту скрипку.

Горизонтальный скроллер

К сожалению, для этого требуется вычислить ширину скроллера, в зависимости от содержимого. Есть ли автоматический способ?

HTML выглядит следующим образом:

       <div class="scrollerContainer hScrollable">
            <div class="scroller">
                <div id="photo1"></div>
                <div id="photo2"></div>
                <div id="photo3"></div>
                <div id="photo4"></div>
                <div id="photo5"></div>
                <div id="photo6"></div>
                <div id="photo7"></div>
                <div id="photo8"></div>
                <div id="photo9"></div>
            </div>
        </div>

И связанный CSS следующим образом:

.hScrollable {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space:nowrap;
}

scrollerContainer {
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin: 0;
    border: solid 1px black;
}
.scroller {
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;    /* Really important to avoid vertical scrolling on devices */
    width: 100%;
    height: 50px;
    background-color: lightgray;
}

.scroller>div {
    width: 50px;
    height: 50px;
    display: inline-block;
}

Вертикальный скроллер

Я хотел бы, чтобы содержимое заполнило родительский контейнер и превысило вертикальный размер, прокрутите по вертикали.

HTML выглядит следующим образом:

<div id="container" style="height:400px">

        <div style="height:100px">
           Fixed content, I dont want to vscroll
        </div>
        <div class="tabContent">
           Potentially long content that should vscroll. 
           This div should fill to the end of the container. 
           I don't want to set its height to 300px, 
           but to find a way it does automatically. 
        </div>

</div>
Теги:

1 ответ

1
Лучший ответ

У вас было немного СЛИШКОМ много css, происходящих там. Я обновил вашу скрипту свойствами, которые я переместил/удалил.

Я удалил .hScrollable и .scrollerContainer из css и добавил свойства переполнения прямо к .scroller.

Так что .scroller теперь выглядит так:

.scroller {
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 4px;
    width: 100%;
    background-color: lightgray;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space:nowrap;
}

Здесь скрипка.

  • 0
    Спасибо, @theJoeBiz, вы ответили на мой вопрос 1) (горизонтальный скроллер). Но у меня все еще есть проблема с вертикальной прокруткой (вторая и третья вкладка скрипки). Я пытался перевести ваше решение на это безуспешно. Вот обновленная скрипка jsfiddle.net/stephanedeluca/56gFf/14
  • 0
    @ StéphanedeLuca Ваша проблема с высотой состоит в том, что у вас есть высота на .scroller, установленная в 50px. Если вместо этого вы измените его на min-height, .scroller всегда будет иметь размер не менее 50px, но на самом деле он будет выше, если появится полоса прокрутки (чтобы учесть высоту полосы прокрутки). Я также изменил overflow-x на auto на .hScrollable, чтобы полоса прокрутки не отображалась, если содержание не превышает 100%. jsfiddle.net/56gFf/15
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню