用overflow:hidden解決瀏覽器下方出現捲軸問題

一般頁面下方會出現捲軸,通常都是有橫區塊寬度超出瀏覽器視窗當時寬度所造成。
製作頁面若加入Slider輪播這類的Jquery效果時,明明所有橫區塊的寬度照道理100%都不應該超過瀏覽器視窗寬度,但有時就是莫明奇妙會遇到瀏覽器出現橫捲軸畫面可拉動的囧狀,頁面就存在著瑕疵。

若是自己原始打造的區塊可能還比較好找出問題,若是用Jquery Plug-in這類現成模組,若要往細節找是那個環節造成的,那就不只有點痛苦了。



粉妞用flexslider Plug-in來做首頁主圖輪播的效果,包含所提供的CSS,崁入很方便,一切看起來還挺順暢的,突然發現怎麼下方出現了如上圖的捲軸。

將畫面移動後發現要顯示區域的寬度很一致包含背景並沒有超出的部份,那就是隱性超出囉,也就是超出部份不顯示也沒關係,因此就在banner這區的主外框的css定義上加了 overflow:hidden,賓果~問題果然就解決了。



這個網誌中的熱門文章

沒印表機沒關係 便利商店找印去

被時代淘汱的英文怎麼說

探訪神秘的烏法魯神殿

色情廣告視窗關不掉? 動手解解看吧~

玩轉水晶石工作室 妝點個人部落