HTML滾動條操作

2021-08-31 22:00:19 字數 2237 閱讀 6183

去掉水平滾動條:

去掉豎直滾動條:

隱藏橫向滾動條,顯示縱向滾動條:

全部隱藏

或者是這裡先說一下滾動條的屬性**:

overflow-y : visible | auto | hidden | scroll

visible :  不剪下內容也不新增滾動條。

auto :  在需要時剪下內容並新增滾動條

scroll :  總是顯示縱向滾動條

首先我現說一下去掉滾動條的方法:

在body

{}中加入overflow-y :

visible就可以了,這樣滾動條就不會顯示出來了。大家可能會問,這樣怎麼往下拉?呵呵,既然我說了不影響瀏覽,那當然是有方法的,瀏覽的方法就是用

滑鼠的滾輪,雖然滾動條沒了,可是滑鼠滾輪還是能夠讓網頁上下滾動的。我相信大家一般瀏覽網頁的時候用滾輪下拉網頁的次數應該比直接用滑鼠拖動滾動條的次

數多吧?提示下,如果碰到沒有滾動條而滑鼠又沒有滾輪的朋友,該怎麼瀏覽網頁呢?呵呵,大家可以用鍵盤上面的方向鍵上方的pageup和pagedown

來上下翻頁,也可以用空格往下拉網頁和shift+空格往上拉網頁,還有乙個方法就是用上下方向鍵來拉動,另外還有按home鍵回到網頁頂部,end鍵到

達網頁底部,呵呵,是不是方法很多呢?不過這樣總會有那麼一些些的不方便,所以大家可以根據自己的空間和喜好來考慮要不要取消這個滾動條。

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

下面我們說新增滾動條的方法:

overflow-y : auto;height:多少px

auto

就是自動判斷要不要加入滾動條,當設定的物件內容超過了height設定的高度時,就自動新增滾動條,不然則不顯示,body{}中的預設值就是

overflow-y : auto;height:瀏覽器高度,所以當網頁內容超過瀏覽器高度的時候,瀏覽器右邊就會自動顯現出滾動條來

大家如

版的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: 顏色**;

這 裡的上還有乙個scrollbar-base-color的屬性,其實這個屬性是個上面7個屬性的總合,怎麼說呢?就是當你設定了這個屬性的顏色後,

前面的7個屬性都可以不用設定了,滾動條會自動幫你設定的,只是這個設定都會基於你設定的scrollbar-base-color的顏色而自動設定

這個屬性的優點就是不用大家費盡心思的去研究各個地方的顏色,但是缺點就是不能夠融和五顏六色於一體。。

注:設定了scrollbar-base-color就不要設定其他七個屬性了,設定了其他七個屬性就不要設定scrollbar-base-color,不然之間可能會有衝突,會有一些效果不起作用的

scrollbar-face-color: #ccffff;

scrollbar-highlight-color: white;

scrollbar-shadow-color: #813533;

scrollbar-3dlight-color: #813533;

scrollbar-arrow-color: #813533;

scrollbar-track-color: white;

scrollbar-darkshadow-color: #813533;

以上**本人是加在body{}中的

HTML實現滾動條

overflow scroll 這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll 預設值為 visible 不論是否需要,使用者 都會提供一種滾動機制。因此,有可能即使元素框中可以放下所有內容也會出現滾動條。eg 這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll ...

html滾動條樣式

一 滾動條的軌跡,記作 scrollbar track。所謂 軌跡 指滾動條的滑動塊執行時所必經的路線。二 滾動條的滑動塊,即在它上面按下滑鼠左鍵不放可上下或左右移動的滑動塊以及滾動條兩頭的小方塊,記作 scrollbar face。face即滾動條的 臉 注意它有三張 臉 滑動條和兩頭的小方塊。三...

HTML 隱藏滾動條和去除滾動條的方法

1.html 標籤加屬性 xml html code複製內容到剪貼簿 htmllang en class no ie style overflow hidden 2.body中加入以下 xml html code複製內容到剪貼簿 styletype text css html html頁面去除滾動條...