html 滚动条怎么设置样式才能让轨道不遮挡原来的样式

现设置了鼠标移入和移除显示滚动条，然后设置了overflow-y的dom外层div和内部第一个div宽度相同，已经不会让dom变形，但是滚动条出现后，会遮住一条，设置了透明也没用
图片.png

前端 vue.js css html

html5

阅读 5k

2 个回答

得票最新

gentlecoder

1.2k1113

发布于
2020-06-15

✓ 已被采纳

在body上可以设置overflow: overlay来实现透明，非body元素不行，注意这里overlay是一个即将过时的属性。

<!DOCTYPE html>
<html>
<style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow: overlay;
}

.div1 {
  background: grey;
  margin-top: 200px;
  margin-bottom: 20px;
  height: 20px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
</style>
  
<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>
  

</body>
</html>

或着用透明的图片来实现。

::-webkit-scrollbar-track-piece:start {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}