Question

在此示例中，默认情况下隐藏滚动条，在悬停.outer时，滚动条可见。那么我应该如何在chrome中使滚动条轨道背景透明？我设置滚动条和滚动条轨道透明，但它不起作用。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

<强>更新

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

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

如何在chrome中使滚动条（-track）透明？

1 个答案: