На мобильном устройстве (сафари, веб-просмотры, где бы то ни было), overflow:scroll и overflow-scrolling: touch дают довольно гладкий свиток, который крут.
Но это делает страницу "отскок" (область, обведенная ниже), что не так, когда вы ее не используете, но которая делает этот опыт немного менее "родным" (а проще говоря, насколько я может иметь мнение об этом, абсолютно не пользуется)
Есть ли способ предотвратить это? Большое спасибо за вашу помощь/подсказки/ответы
Мне удалось найти обходное решение CSS для предотвращения перескакивания окна просмотра. Ключом было обернуть содержимое в 3 div с помощью -webkit-touch-overflow: прокрутка, примененная к ним. Окончательный div должен иметь минимальную высоту 101%. Кроме того, вы должны явно установить фиксированную ширину/высоту тега body, представляющую размер вашего устройства. Я добавил красный фон на теле, чтобы продемонстрировать, что это контент, который теперь подпрыгивает, а не видовое окно мобильного сафари.
Исходный код ниже и здесь - plunker (это было проверено и на iOS7 GM). http://embed.plnkr.co/NCOFoY/preview
Если вы намереваетесь запустить это как полноэкранное приложение на iPhone 5, измените высоту до 1136px (когда для Apple-mobile-web-app-status-bar-style установлено значение "black-translucent" или 1096px, когда установлен на "черный" ). 920x - это высота окна просмотра, когда учитывается хром мобильного сафари).
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
<style>
body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
.no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
p { display: block; height: 50px; }
</style>
</head>
<body>
<div class="no-bounce">
<div>
<div>
<h1>Some title</h1>
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
<p>item 7</p>
<p>item 8</p>
<p>item 9</p>
<p>item 10</p>
<p>item 11</p>
<p>item 12</p>
<p>item 13</p>
<p>item 14</p>
<p>item 15</p>
<p>item 16</p>
<p>item 17</p>
<p>item 18</p>
<p>item 19</p>
<p>item 20</p>
</div>
</div>
</div>
</body>
</html>
Там есть замечательная запись в блоге:
http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
Наряду с демо здесь:
http://www.kylejlarson.com/files/iosdemo/
В заключение вы можете использовать следующее в div, содержащем ваш основной контент:
.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Проблема, которую, я думаю, вы описываете, - это когда вы пытаетесь прокручивать вверх в div, который уже находится наверху, затем он прокручивает страницу вместо div и вызывает эффект отскока вверху страницы, Я думаю, ваш вопрос спрашивает, как избавиться от этого?
Чтобы исправить это, автор предлагает вам использовать ScrollFix для автоматического увеличения высоты прокручиваемых div.
Также стоит отметить, что вы можете использовать следующее, чтобы предотвратить прокрутку пользователя, например. в навигационном элементе:
document.addEventListener('touchmove', function(event) {
if(event.target.parentNode.className.indexOf('noBounce') != -1
|| event.target.className.indexOf('noBounce') != -1 ) {
event.preventDefault(); }
}, false);
К сожалению, все еще есть проблемы с ScrollFix (например, при использовании полей формы), но список проблем на ScrollFix - это хорошее место для поиска альтернатив. Некоторые альтернативные подходы обсуждаются в этой проблеме.
Другие альтернативы, также упоминаемые в сообщении в блоге, Scrollability и iScroll
вы можете попробовать
$('*').not('#div').bind('touchmove', false);
добавить это при необходимости
$('#div').bind('touchmove');
Обратите внимание, что все фиксировано, кроме #div
body {
position: fixed;
height: 100%;
}
Этот ответ кажется устаревшим и не подходит для современных одностраничных приложений. В моем случае я нашел решение благодаря этой статье, где предлагается простое, но эффективное решение:
html,
body {
position: fixed;
overflow: hidden;
}