CSS3滚动条样式的div [英] CSS3 scrollbar styling on a div

问题描述

我的意思是这些属性

 
 code> ::  -  webkit-scrollbar {
 width：12px; 
} 
 
 ::  -  webkit-scrollbar-track {
 -webkit-box-shadow：inset 0 0 6px rgba（0,0,0,0.3）; 
 border-radius：10px; 
} 
 
 ::  -  webkit-scrollbar-thumb {
 border-radius：10px; 
 -webkit-box-shadow：inset 0 0 6px rgba（0,0,0,0.5）; 
} 
  

这是我的div标签

 < div class =scroll>< / div> 
  

以下是我目前的CSS

  .scroll {
 width：200px; height：400px; 
 overflow：hidden; 
} 
  

解决方案

设定 overflow：hidden 隐藏滚动条。设置 overflow：scroll 以确保滚动条始终显示。

使用 :: webkit-scrollbar 属性，在调用它之前只需定位 .scroll 。

  .scroll {
 width：200px; 
 height：400px; 
 background：red; 
 overflow：scroll; 
} 
 .scroll ::  -  webkit-scrollbar {
 width：12px; 
} 
 
 .scroll ::  -  webkit-scrollbar-track {
 -webkit-box-shadow：inset 0 0 6px rgba（0,0,0,0.3）; 
 border-radius：10px; 
} 
 
 .scroll ::  -  webkit-scrollbar-thumb {
 border-radius：10px; 
 -webkit-box-shadow：inset 0 0 6px rgba（0,0,0,0.5）; 
} 
 
  

查看此活动示例

How can i style webkit scrollbars with CSS3?

I mean these properties

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Here is my div tag

<div class="scroll"></div>

Here is my current CSS

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}

解决方案

Setting overflow: hidden hides the scrollbar. Set overflow: scroll to make sure the scrollbar appears all the time.

To use the ::webkit-scrollbar property, simply target .scroll before calling it.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
​

See this live example

这篇关于CSS3滚动条样式的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！