а как вообще верстать мобильные сайты там где нужно хоть чуть чуть прокрутки внутри произвольного div?
с андроид и прочими виндовс все хорошо, а iphone прокручивать div'ы вообще похоже нормально не умеет? получить плавную прокрутку iphone возможно только если прокручиваем body и больше ничего прокручивать нельзя, так?
пример ниже.
в общем задача формулируется так: имеется произвольный div, размер которого предопределен (например пол экрана итп). Контент его больше его размера и хочется его прокрутить.
как решить эту задачу в браузерах iOS? то есть на айфоне/айпаде?
|
Код:
|
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>test</title>
<style>
html, body {
height: 100%;
width: 100%;
overflow: none;
margin: 0px;
padding: 0px;
}
#main {
height: 100%;
width: 100%;
overflow: none;
}
#header, #footer {
height: 20%;
overflow: none;
background-color: rgb(200, 200, 200);
text-align: center;
}
#body {
height: 60%;
overflow-y: auto;
background-color: rgb(220, 220, 220);
padding: 5px;
}
</style>
</head>
<body>
<div id="main">
<div id="header">block</div>
<div id="body">
<script>
for (var i = 0; i < 1000; i++) {
document.write('test line ' + i + '<br/>');
}
</script>
</div>
<div id="footer">block</div>
</div>
</body>
</html> |
