custom scrollbar & ::-webkit-scrollbar & hidden scrollbar All In One

custom scrollbar & ::-webkit-scrollbar & hidden scrollbar All In One

how to using css hidden scrollbar

::-webkit-scrollbar

自定义滚动条

*::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}



.tabs-title-box::-webkit-scrollbar,
.tabs-content-box::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

Custom Scrollbar

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

https://css-tricks.com/custom-scrollbars-in-webkit/

demos

::-webkit-scrollbar-track-piece

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track-piece {
  background-color: #999;
  box-shadow: 0 1px 0 0 rgba(255,180,61,.07);
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #222;
  border-radius:5px;
}

::-webkit-scrollbar-corner {
  display: block
}

https://mac.orsoon.com/news/1038101.html

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---