All geek questions in one place

Scrolling div with overflow without javascript

I have a div with a static height, with content trimmed with overflow: auto. In regular desktop browsers, I use javascript to scroll to the bottom of the content. However, I need to do the same in mobile browsers or in browsers without javascript. Not in real time, but to output html + css so that the browser displays the bottom of the content.

Tools at my disposal: HTML, CSS, PHP.

Is it possible?

+3
source share
1 answer

This is actually a trick to achieving this without 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 - . .

+11

Source: https://habr.com/ru/post/1732580/

More articles:


All Articles