javascript - 如何使滚动条(-track)在 chrome 中透明？

Question

在这个例子中，滚动条默认是隐藏的，当悬停在.outer上时，滚动条是可见的。那么我应该如何使滚动条轨道背景在 chrome 中透明？我设置了 scrollbar 和 scrollbar-track 透明，但它不起作用。

* {
  margin: 0;
  padding: 0;
}

.outer {
  margin: 20px;
  font-size: 13px;
  line-height: 1.6;
  width: 260px;
  height: 300px;
  overflow: overlay;
}

.inner p:nth-child(1) {
  background: #ce9;
}
.inner p:nth-child(2) {
  background: #8f6;
}

::-webkit-scrollbar {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #fc0;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

.outer::-webkit-scrollbar {
  display: none;
}

.outer:hover::-webkit-scrollbar {
  display: block;
}

<div class="outer">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Answer 1

这将隐藏滚动条并仍然允许用户在您的页面上滚动

::-webkit-scrollbar {
    display: none;
}

更新

在悬停时给外部 div 一些填充，这样滚动条就不会覆盖内容

.outer:hover{
   padding-right: 17px;
}