瀏覽器的錯誤滾動

唐小娟發表於2012-01-12

我們期望瀏覽器可以滾動瀏覽文字。但是大部分瀏覽器的都不能正確滾動。

圖1顯示了一列文字,灰條代表一行文字,藍色的正方框代表我們的瀏覽器目前的可視範圍。紅條是當前螢幕顯示的最後一行文字,如果瀏覽器視窗更長些,就能顯示綠色的那一行文字。

圖1:滾動前

 

圖2 顯示當你按下“下一頁”或者空格鍵的時候會出現的畫面,以下兩種情況都是合理的,瀏覽器視窗的最上面一行可以是紅條,也可以是綠條。瀏覽器對此處理得很好,我們的眼睛也知道瀏覽到哪裡了。

圖2:滾動後的兩種情況

 

但有個問題,圖3說明,當你接近頁面的底部,在當前屏最後一行文字之後所剩的文字不多了。

圖3:有問題的情況:滾動前

 

當你此時按下空格鍵或“下一頁”時,你期望的還是和之前一樣的效果,如圖4所示:兩屏頁面沒有重合或者僅有一行文字重合。

圖4:在接近頁面底部時,瀏覽器應該如何處理滾動

 

但由於某些原因,瀏覽器不會在頁面底部留空格,所以文字不會全部滾上去,如圖5所示,你上一屏讀到的最後一行文字會隨意的留在這一屏的中間位置。

圖5:在接近頁面底部時,瀏覽器實際上如何處理滾動

 

當此種情況發生時,閱讀被中斷了,因為我不知道我上一次讀到了哪裡。

還存在另外一個問題,如果你在文章裡連結了小標題,正確採用了程式段錨點進行標記,你所連結的位置應該出現在視窗的頂部。和上面的bug類似,瀏覽器不會在視窗底部留空格,所以很難對文章的結論用錨點連結。

為了詳細闡明這一問題,這裡給出本部落格的兩個連結。第一個連結中,小標題”索引”,能夠正確顯示。第二個連結,關於瀏覽器的一則評論,卻沒能夠正確的出現在瀏覽器的頂部。

網上的眾多頁面中,這個bug之所以不明顯是因為文字內容往往比側欄要短得多,或者底部有很多裝飾,往往有眾多廣告。想要閱讀有關這個主題的內容,請移步Brent Simmons’的部落格:“可讀性的未來

那這個問題可以解決嗎?很簡單,在瀏覽器視窗的底部加幾行空格吧。

 

英文原文:tbray.org    編譯:伯樂線上 – 唐小娟

【如需轉載,請標註並保留原文連結、譯文連結和譯者等資訊,謝謝合作!】

 

相關文章