Rumah > hujung hadapan web > tutorial css > css怎么设置滚动条宽度

css怎么设置滚动条宽度

王林
Lepaskan: 2022-04-01 16:12:25
asal
14166 orang telah melayarinya

css中可利用“::-webkit-scrollbar”选择器和width属性来设置滚动条宽度,语法为“::-webkit-scrollbar{width:宽度值;}”;该选择器用于选中整个滚动条,而width属性用于为选中的元素设置宽度。

css怎么设置滚动条宽度

本教程操作环境:windows10系统、CSS3&&HTML5版、thinkpad t480电脑。

方法思路如下:

在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式,并在此伪类选择器中通过width属性设置滚动条的宽度。

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式。

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块

::-webkit-scrollbar-track — 滚动条轨道

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

实现代码:

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }
Salin selepas log masuk

相关推荐:CSS教程

Atas ialah kandungan terperinci css怎么设置滚动条宽度. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan