滚动条相关

滚动条样式

 
 
<p class="item">
    这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css这是css
</p>
 

::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 背景槽 */
  background-color: #ddd;
  border-radius: 6px;
}
 

隐藏滚动条

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
 
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

全局滚动条样式

* {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
*::-webkit-scrollbar-track-piece {
  background: transparent;
}
 
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
 
*::-webkit-scrollbar-thumb {
  background: rgba(153, 169, 191, 0.867);
  border-radius: 4px;
}
 
/* 支持 Firefox 浏览器 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(153, 169, 191, .3) transparent;
}