DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS隱藏網頁滾動條的方法 包括橫向縱向滾動條
CSS隱藏網頁滾動條的方法 包括橫向縱向滾動條
編輯:CSS詳解     
  • 當我們打開第一個網頁的時候,浏覽器都會顯示橫向、縱向的滾動條,如果不想要某一方向上的滾動條,可以用CSS將其隱藏掉,代碼也是很簡單的,在CSS只需定義一句便可:

    1 /*CSS代碼:隱藏橫向滾動條*/ 2 Html{overflow: auto; overflow-x:hidden} 3 /*CSS代碼:隱藏縱向滾動條*/ 4 Html{overflow: auto; overflow-y:hidden} 5 /*FF、谷歌,Oprea都兼容,但要支持IE6~9,HTML頭部定義需要這樣,您可以復制下面的代碼替換掉你的Html頭部: 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 7 <Html XMLns="http://www.w3.org/1999/xHtml" XML:lang="zh" lang="zh" dir="ltr"> 8 */

    這種方法實際上是通過隱藏超出某個方向上的內容,滾動條也自然就不顯示了。不過還有一種方法,是強制不顯示網頁滾動條,只需在Body區添加一句代碼即可,如下:

    1 <boby scroll="no"> 2 <!--不過據反應,在有些時候死活沒效果,可能是浏覽器的問題吧!--> 3   4 還可以選擇在不需要時隱藏: 5 <boby scroll="auto"> 6 <!--當浏覽器窗口寬度或高度大於頁面的寬或高時,不顯示滾動條;反之,則顯示;-->

    還有一種CSS方法,將橫向、豎向滾動條都隱藏掉:

    1 <style type="text/CSS"> 2 Html { 3 overflow-x:hidden; 4 overflow-y:hidden; 5 } 6 </style>

    根據你的實際情況選用吧,估計會有適合你的方法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved