1. 程式人生 > >如何去除頁面滾動條

如何去除頁面滾動條

<body scroll=no>

去掉水平滾動條:
<body style="overflow-x: hidden">
去掉豎直滾動條:
<body style="overflow-y: hidden">

隱藏橫向滾動條,顯示縱向滾動條:
<body style="overflow-x:hidden;overflow-y:scroll">

全部隱藏
<body style="overflow:hidden">

或者是
<body scroll="no">

如果是框架頁,利用上面的方法仍不能去除可考慮以下辦法:

被包含頁面里加入
<style>
html { overflow-x:hidden; }
</style>

如果想隱藏垂直滾動條:

<style>
html { overflow-y:hidden; }
</style>

這裡先說一下滾動條的屬性程式碼:
overflow-y : visible | auto | hidden | scroll
visible :  不剪下內容也不新增滾動條。
auto :  在需要時剪下內容並新增滾動條
hidden :  不顯示超過物件高度的內容,這裡不對這個屬性作介紹,大家喜歡的話可以自己嘗試
scroll :  總是顯示縱向滾動條


首先我現說一下去掉滾動條的方法:
如果用百度風格模版的話,滾動條只可能有一個,那就是整個空間右邊最大的瀏覽器視窗滾動條,也就是我美化過的那個滾動條,現在告訴大家,我們可以把這個滾動條去掉,但是卻不影響瀏覽的方法:
在body
{}中加入overflow-y :
visible就可以了,這樣滾動條就不會顯示出來了。大家可能會問,這樣怎麼往下拉?呵呵,既然我說了不影響瀏覽,那當然是有方法的,瀏覽的方法就是用
滑鼠的滾輪,雖然滾動條沒了,可是滑鼠滾輪還是能夠讓網頁上下滾動的。我相信大家一般瀏覽網頁的時候用滾輪下拉網頁的次數應該比直接用滑鼠拖動滾動條的次
數多吧?提示下,如果碰到沒有滾動條而滑鼠又沒有滾輪的朋友,該怎麼瀏覽網頁呢?呵呵,大家可以用鍵盤上面的方向鍵上方的PageUp和PageDown
來上下翻頁,也可以用空格往下拉網頁和Shift+空格往上拉網頁,還有一個方法就是用上下方向鍵來拉動,另外還有按Home鍵回到網頁頂部,End鍵到
達網頁底部,呵呵,是不是方法很多呢?不過這樣總會有那麼一些些的不方便,所以大家可以根據自己的空間和喜好來考慮要不要取消這個滾動條。

哈哈,想不到囉哩叭嗦地,一下說了這麼多話

下面我們說新增滾動條的方法:
overflow-y : auto;height:多少px
auto
就是自動判斷要不要加入滾動條,當設定的物件內容超過了height設定的高度時,就自動新增滾動條,不然則不顯示,body{}中的預設值就是
overflow-y : auto;height:瀏覽器高度,所以當網頁內容超過瀏覽器高度的時候,瀏覽器右邊就會自動顯現出滾動條來
大家如
果需要設定這個的話,本人建議設定在最新評論#m_comment{}、文章列表#m_blog{}等內容和高度都不固定的模版中,有的朋友找不到這些模
版的ID,可能只有例如#m_comment div.item{}或者#m_pro a{}等的ID,那麼可以自己加上沒有的ID,這樣就可以設定了

這裡還有另一個新增滾動條的方法:
overflow-y :scroll
這個引數的作用上面解釋過了,不過如果只加這個引數的話,雖然滾動欄會顯示,但是不會顯示滾動條,所以必須還要加上一個
height:多少px
高度屬性,跟上面的那個方法差不多,但是有根本的區別,這個無論物件內容的高度是否超過了height設定的高度,滾動欄永遠都會顯示在邊上的

下面我們說一下關於滾動條的美化,這個我朋友給我看了網上的一個說明,我覺得上面的圖很不錯,但是很小,所以我放大了一倍,看起來就清楚多了,我們先說一下美化的各個屬性:
SCROLLBAR-FACE-COLOR: 顏色程式碼;
SCROLLBAR-HIGHLIGHT-COLOR:顏色程式碼;
SCROLLBAR-SHADOW-COLOR: 顏色程式碼;
SCROLLBAR-3DLIGHT-COLOR: 顏色程式碼;
SCROLLBAR-ARROW-COLOR: 顏色程式碼;
SCROLLBAR-TRACK-COLOR: 顏色程式碼;
SCROLLBAR-DARKSHADOW-COLOR: 顏色程式碼;
大家是不是看到這麼多屬性有點點頭大了?哈哈,放心,看一下我剛才提及的被我放大了一倍的圖解你們就會感覺好多了: