隐藏滚动条

1.隐藏滚动条，依旧保留滚动条功能。

<div class="example">
  Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable
  scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text
  to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..
  Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable
  scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text
  to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..
  Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable
  scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text
  to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..
</div>

.example {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 终极 */
.example ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}

2.隐藏滚动条，hover 时依旧显示滚动条。

.example::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

.example::-webkit-scrollbar-thumb {
  background: transparent;
}

.example:hover::-webkit-scrollbar-thumb {
  background: red;
}

.example:hover::-webkit-scrollbar-track {
  background: blue;
}