Прокрутка в iphone/ipad - HTML и CSS

linuxover · 02.02.2016, 13:29

а как вообще верстать мобильные сайты там где нужно хоть чуть чуть прокрутки внутри произвольного 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>

Naive · 04.02.2016, 22:10

а overflow:auto чем мешает?

kazachek1 · 28.02.2016, 16:13

ну а с помощью @media если сделать?

ProBeginner · 28.02.2016, 17:01

Проверьте body, чтоб не появлялась прокрутка для всей страницы.
Браузеры без мыши могут путаться с тем, что прокручивать.

mafinera · 28.02.2016, 18:07

Цитата:

Сообщение от kazachek1

ну а с помощью @media если сделать?

не при чем тут медиа, я просто такие работы вот на этом движке делаю http://www.umi-cms.ru/editions/commerce/

02.02.2016, 13:29	#1
linuxover Новичок Джуниор Регистрация: 02.02.2016 Сообщений: 1	Прокрутка в iphone/ipad а как вообще верстать мобильные сайты там где нужно хоть чуть чуть прокрутки внутри произвольного 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> Последний раз редактировалось linuxover; 02.02.2016 в 13:41.

04.02.2016, 22:10	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	а overflow:auto чем мешает? Alar, верни репу!

28.02.2016, 17:01	#4
ProBeginner Форумчанин Регистрация: 22.02.2016 Сообщений: 145	Сайт-визитка для мобильника Проверьте body, чтоб не появлялась прокрутка для всей страницы. Браузеры без мыши могут путаться с тем, что прокручивать. Возьму в кредит мильён по 100% годовых на сто лет.

28.02.2016, 16:13	#3
kazachek1 Новичок Джуниор Регистрация: 28.02.2016 Сообщений: 1	ну а с помощью @media если сделать?