一千萬個為什麽

搜索

在沒有javascript的情況下滾動帶有溢出的div

我有一個靜態高度的div,使用 overflow:auto 剪切內容。在常規桌面瀏覽器上,我使用javascript滾動到內容的底部。但是,我需要在移動瀏覽器或沒有javascript的瀏覽器上執行相同的操作。不是實時的,而是以這樣的方式輸出html + css,以便瀏覽器呈現內容的底部。

我可以使用的工具:HTML,CSS,PHP。

這可能嗎?

最佳答案

事實上,沒有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;">
        
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.


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.


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.

</div> </body> </html>

在Opera 10.0中測試上述內容時,我發現了元刷新的一個小問題,它顯然將0解釋為無限循環,與其他瀏覽器不同。 IE for Windows Mobile 6似乎也出現了類似的問題。我確信這可以通過某種方式解決。一種選擇是提供帶有錨標記的URL。

我也用Safari在iPhone上測試了上面的內容,看起來效果很好。

不過我不得不說,在移動瀏覽器中沒有任何內部滾動的情況下渲染完整的div內容可能是一個更好的主意。移動瀏覽器中的多個滾動條似乎不太可用。

轉載註明原文: 在沒有javascript的情況下滾動帶有溢出的div