2
Я пытаюсь отключить эффект отскока, так что, когда вы дойдете до конца прокручивающегося div, он остановится, не будет отказов вообще. Это отлично работает на Mac Safari, но не в мобильном сафари.Стоп Bounce/Резиновая лента/эффект overscroll
До сих пор у меня этот код, он останавливает эффект отскока, так что вы больше не видите серый цвет, но все, что он сделал, это изменение отскока на мой цвет фона.
Может кто-нибудь помочь и, пожалуйста, не говорите, что это дубликат, потому что я прошел через все остальные вопросы, и это лучшее, что я придумал до сих пор. Код должен быть просмотрен на мобильном телефоне.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<style type="text/css">
html, body {
overflow:hidden;
height:100%;
width:100%;
}
* {
border:0px;
margin:0px;
}
#page-wrapper {
width:100%;
height:100%;
}
#top {
background:red;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#bottom {
background:green;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#content-wrapper {
box-sizing:border-box;
height:100%;
width:100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
position:relative;
z-index:2;
background:pink;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="top"></div>
<div id="bottom"></div>
<div id="content-wrapper" class="scrollable">
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
</div>
</div>
<script>
document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
});
</script>
</body>
</html>
https://github.com/pinadesign/overscroll –
Спасибо, что работает точно так, как описано, но не проверял его на разных платформах, но пока это так хорошо. – Dan
Существует одна неприятная проблема, которую я поднял там, это был для меня разбойник, он, похоже, «убил» любые сенсорные свитки, которые начинаются с элемента textarea. У меня было довольно много больших текстовых ящиков на моих формах, что затрудняло прокрутку. Я не мог потрудиться, чтобы попытаться исследовать это дальше, так как я действительно хотел, чтобы резиновая полоса просто происходила на неправильных элементах (например, резиновая лента с фиксированным заголовком). Больше информации здесь: http: //stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps/12765599#comment31504823_12765599 ... Удачи :) –