滾動div，溢出沒有JavaScript

我有一個靜態高度的div，使用overflow: auto剪輯的內容。在普通的桌面瀏覽器上，我使用javascript滾動到內容的底部。不過，我需要在移動瀏覽器或沒有使用JavaScript的瀏覽器上執行相同的操作。不是實時的，而是以這種方式輸出html + css，以便瀏覽器渲染內容的底部。滾動div，溢出沒有JavaScript

我可以使用的工具：HTML，CSS，PHP。

這可能嗎？

來源

2010-02-12 GhassanPL

正如一個註釋：PHP是一種服務器端語言，因此不會以這種方式影響客戶端渲染。 – 2010-02-12 18:10:07

實際上有一個技巧可以在沒有JavaScript的情況下實現。

您可以在可滾動div的底部放置錨定標記，然後使用HTML頁面中的元刷新標頭來請求重定向到此錨點。在這種情況下，瀏覽器不應該觸發真正的頁面刷新，因爲只有散列部分會發生變化。它應該簡單地滾動到div底部的錨點。

在谷歌瀏覽器4.0，火狐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解釋爲無限循環，與其他瀏覽器不同。在Windows Mobile 6的IE中似乎也出現了類似的問題。我確信這可以通過某種方式解決。一種選擇是提供完整的URL和錨標籤。

我也使用Safari在iPhone上測試了上述內容，並且它看起來工作正常。

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

來源

2010-02-12 17:45:46

這是一個天才解決方法。 – 2010-02-12 19:21:35

你是我的英雄。 – metrobalderas 2010-02-13 00:57:14

非常聰明，這是一個很好的解決方法。請注意，元刷新雖然會爲瀏覽歷史記錄添加條目，但有時嘗試點擊返回上一頁可能會很麻煩。我通常傾向於避免以這種方式劫持我的後退按鈕的網站。幹得好:-) – 2010-02-13 09:17:02

滾動div，溢出沒有JavaScript

回答

相關問題