Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   можно ли вообще сделать прокручиваемый блок чтобы он работал в браузере от iOS? (https://javascript.ru/forum/xhtml-html-css/61047-mozhno-li-voobshhe-sdelat-prokruchivaemyjj-blok-chtoby-rabotal-v-brauzere-ot-ios.html)

linuxover 02.02.2016 13:38

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



Часовой пояс GMT +3, время: 19:51.