Прокрутка div с переполнением без JavaScript - PullRequest
3 голосов
/ 12 февраля 2010

У меня есть div со статической высотой, содержимое которого обрезается с помощью overflow: auto. В обычных браузерах для настольных компьютеров я использую javascript для прокрутки до нижней части содержимого. Тем не менее, мне нужно сделать то же самое в мобильных браузерах или браузерах без JavaScript. Не в режиме реального времени, а для вывода html + css таким образом, чтобы браузер отображал нижнюю часть содержимого.

Инструменты в моем распоряжении: HTML, CSS, PHP.

Возможно ли это?

1 Ответ

11 голосов
/ 12 февраля 2010

На самом деле есть хитрость для достижения этого без JavaScript.

Вы можете поместить тег привязки в нижней части прокручиваемого элемента div, а затем использовать заголовок метаобновления на своей HTML-странице, чтобы запросить перенаправление на эту привязку. В этом случае браузер не должен запускать реальное обновление страницы, потому что изменится только часть хеша. Следует просто прокрутить до якоря в нижней части div.

В Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4, IE 7 и IE 8 работает следующее:

<html>
<head>
    <meta http-equiv="refresh" content="0; url=#anchor-bottom" />
</head>
<body>
    <div style="overflow: scroll; height: 100px; width: 150px;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
        ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
        eleifend option congue nihil imperdiet doming id quod mazim.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis 
        Investigationes demonstraverunt lectores legere me lius quod ii 
        processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
        gothica, quam nunc putamus parum claram, anteposuerit litterarum 
        seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
        fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
        veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
        claritatem. Investigationes demonstraverunt lectores legere me.</p> 

        <a name="anchor-bottom"></a>

        <p>Mirum est notare quam littera gothica, quam nunc putamus parum
        humanitatis per seacula quarta decima et quinta decima. Eodem modo 
        clari, fiant sollemnes in futurum.</p>
    </div>
</body>
</html>

При тестировании вышеописанного в Opera 10.0 я обнаружил небольшую проблему с мета-обновлением, которое, по-видимому, интерпретирует 0 как бесконечный цикл, в отличие от других браузеров. Похоже, аналогичная проблема возникла в IE для Windows Mobile 6. Я уверен, что это можно решить каким-то образом. Одним из вариантов будет указание URL-адреса вместе с тегом привязки.

Я также протестировал вышеупомянутое на iPhone с Safari, и, похоже, оно работает нормально.

Тем не менее, я должен сказать, что, возможно, было бы лучше отрисовывать полный контент div без какой-либо внутренней прокрутки в мобильных браузерах. Множество полос прокрутки в мобильных браузерах не очень удобно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...