首頁 > 文章 > web前端 > css如何讓捲軸不顯示

css如何讓捲軸不顯示

醉折花枝作酒筹原創: 2021-06-01 16:22:1714363瀏覽

在css中，可以使用「::-webkit-scrollbar」偽類選擇器來選取捲軸，然後使用「display:none」樣式不顯示捲軸即可；具體語法格式「:: -webkit-scrollbar{display:none;}」。

css如何讓捲軸不顯示

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

::-webkit-scrollbar CSS偽類選擇器影響了一個元素的捲軸的樣式。我們可以設定::-webkit-scrollbar選擇器display屬性為none來隱藏捲軸。

設定捲軸不顯示的方法：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div style=" width:200px;   height: 200px;  overflow-y: scroll;">
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
       </div>
   </body>
</html>

效果圖：

#設定css效果前：

css如何讓捲軸不顯示

##新增css樣式後：

程式碼

<style>
     ::-webkit-scrollbar {display:none}
</style>

使用css設定捲軸不顯示效果：

css如何讓捲軸不顯示

css捲軸選擇器：

::-webkit-scrollbar — 整個捲軸
#::-webkit-scrollbar-button — 捲軸上的按鈕(上下箭頭)
::-webkit-scrollbar-thumb — 捲軸上的捲動滑桿
::-webkit-scrollbar-track —捲軸軌道
::-webkit-scrollbar-track-piece — 捲軸沒有滑桿的軌道部分

css影片教學

以上是css如何讓捲軸不顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 webkit 选择器 display 伪类

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定字體下一篇：css如何設定字體

看更多