Scrolling a div with overflow without javascript
I have a div with a static height, with content clipped using overflow: auto. On regular desktop browsers I use开发者_开发百科 javascript to scroll to the bottom of the content. However, I need to do the same on mobile browsers, or browsers without javascript. Not in real time, but to output html+css in such a way so as the browser renders the bottom of the content.
Tools at my disposal: HTML, CSS, PHP.
Is this possible?
There is in fact a trick to achieve this without JavaScript.
You can put an anchor tag at the bottom of your scrollable div, and then use the meta refresh header in your HTML page to request a redirect to this anchor. The browser should not trigger a real page refresh in this case, because only the hash part will change. It should simply scroll to the anchor at the bottom of the div.
The following works in Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4, IE 7 and 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>
While testing the above in Opera 10.0, I found a slight issue with the the meta refresh, which apparently interprets the 0 as an infinite loop, unlike the other browsers. A similar problem seemed to happen in IE for Windows Mobile 6. I'm sure this can be tackled in some way. One option would be to supply the URL complete with the anchor tag.
I also tested the above on the iPhone with Safari, and it appears to work fine.
Nevertheless I have to say that it may be a better idea to render the full div content without any internal scrolling in mobile browsers. Multiple scrollbars in mobile browsers do not seem very useable.
加载中,请稍侯......
精彩评论