網站設計分析：無捲軸的頁面螢幕抖動現象

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

讓前端設計幫忙出頁面，上線測試發現頁面切換之間出現螢幕抖動現象。 這相容性問題怎麼老沒解決呢?但細看發現，這不是相容性問題。 而是頁面無捲軸造成的問題。 問前端設計要解決方案，說沒有辦法解決。

沒辦法，我只有自行搜索尋找方法。 我相信這些東西不是問題，一定有方法解決。 下面是我找到的方法，先別笑。

捲軸是什麼?看網頁右側，注意到沒?用Win視窗作業系統的同學對捲軸不陌生吧。

捲軸一般在顯示內容超過一屏時才出現捲軸。 沒超過一屏時一般預設不出現捲軸。

而發生螢幕抖動現象，正是因為人眼對相同部分的網頁模組區域有明顯的感知能力。 比如導航部分，一般整站通用一個頭部導航。 兩個頁面間導航部分錯位1個圖元都能很明顯感知出來。

情況一：頁面都沒有捲軸

朋友網好友管理頁面有5個標籤，但切換的過程中發現幾乎每個標籤頁下面與導航的間距都不一樣。 奇葩啊。

這裡只截圖2個明顯的頁面，如下：

朋友網-尋找好友

朋友網-通訊錄

這種情況下將同水平線的標籤頁統一與頭部的間距即可。 一個圖元都不能少也不能多。

情況二：頁面有部分沒有捲軸

頁面1沒有捲軸，頁面2有捲軸。 2個頁面內都沒有錯位現象。 但只有在切換頁面的時候才發現頭部導航發生抖動，頁面2被出現的捲軸向左移動15個圖元。

看朋友網頁面，如下：

朋友網-無捲軸

朋友網-有捲軸

看紅線距離右側的距離，明顯向左偏移。

Google搜索只找到了關於網頁捲軸的交互設計問題，但沒談到我說的這個現象。 幸好在知乎聯繫到了百度MUX成員MoonMonster ，他給我的回答

這是現階段瀏覽器設計問題，如果希望簡單解決就在自己網站上自訂一個始終出現的捲軸吧。

SO，我沒有找到出乎意料的答案。 也只能這樣笨辦法解決了。

看Google首頁右側固定了捲軸：

Google首頁

年後最後一天，寫下這篇博客。 呵呵。

祝願各位同學新春快樂

除非注明：文章均為Gauin原創，歡迎轉載!轉載請注明本文位址，謝謝!

本文位址：HTTP://www.gauin.com/gundongtiao-yemian.html