Мне нужно обрабатывать как горизонтальную, так и вертикальную прокрутку простым способом, который работает на 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>
У вас было немного СЛИШКОМ много 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;
}
Здесь скрипка.