首頁 > web前端 > css教學 > 主體

css怎麼讓滾動軸看不見

WBOY
發布: 2021-12-03 14:15:57
原創
2783 人瀏覽過

css讓捲動軸看不見方法:1、利用「::-webkit-scrollbar」選擇器選取滾動軸對象,2、利用display屬性將捲動軸樣式設定為不可見即可,語法為「::-webkit-scrollbar{display:none;}」。

css怎麼讓滾動軸看不見

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼讓滾動軸看不見

#在css中可以利用「::-webkit-scrollbar」選擇器來選取捲軸,該選擇器的作用是選擇滾動條對象,並且設定樣式。

語法為:

::-webkit-scrollbar { styles here }
登入後複製

下面我們透過範例來看怎麼設定使捲軸不可見,範例如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
     div{
        width:200px;   
        height: 200px;  
        overflow-y: scroll;
     }
</style>
   </head>
   <body>
       <div>
       孔雀东南飞,五里一徘徊。
十三能织素,十四学裁衣,十五弹箜篌,十六诵诗书。十七为君妇,心中常苦悲。君既为府吏,守节情不移,贱妾留空房,相见常日稀。鸡鸣入机织,夜夜不得息。三日断五匹,大人故嫌迟。非为织作迟,君家妇难为!妾不堪驱使,徒留无所施,便可白公姥,及时相遣归。
       </div>
   </body>
</html>
登入後複製

輸出結果:

css怎麼讓滾動軸看不見

當加入::-webkit-scrollbar {display:none}樣式之後:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
     ::-webkit-scrollbar {display:none}
     div{
        width:200px;   
        height: 200px;  
        overflow-y: scroll;
     }
</style>
   </head>
   <body>
       <div>
       孔雀东南飞,五里一徘徊。
十三能织素,十四学裁衣,十五弹箜篌,十六诵诗书。十七为君妇,心中常苦悲。君既为府吏,守节情不移,贱妾留空房,相见常日稀。鸡鸣入机织,夜夜不得息。三日断五匹,大人故嫌迟。非为织作迟,君家妇难为!妾不堪驱使,徒留无所施,便可白公姥,及时相遣归。
       </div>
   </body>
</html>
登入後複製

輸出結果:

css怎麼讓滾動軸看不見

# (學習影片分享:css影片教學

以上是css怎麼讓滾動軸看不見的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板