Question

如何在容器内制作彩色横幅延伸到透明滚动条下方？

我想使用一个部分透明的自定义滚动条，让您看到背后的背景。在可滚动内容中，存在不同颜色的横幅。下面的示例代码显示了这些横幅延伸到滚动条，然后停止，留下透明滚动条来显示容器的背景颜色，这使滚动条的整个透明效果变得难看。如何在滚动条下方展开这些横幅？

＆＃13;

#container {
  width: 300px;
  height: 200px;
  overflow-y: auto;
  background: black;
}

#banner1, #banner2 {
  width: 100%;
  height: 150px;
}

#banner1 {background: red}
#banner2 {background: yellow}


/* Creates a transparent scrollbar */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0,0,0,0);
  background-clip: padding-box;
  background-color: rgba(255,255,255,0.3);
}

＆＃13;

<div id='container'>
  <div id='banner1'></div>
  <div id='banner2'></div>
</div>

＆＃13;

Answer 1

最终我找到了解决方案。

如果它是滚动的正文标记，那么每个背景条的宽度可以设置为100vw（窗口的宽度包括滚动条），那么overflow-x：hidden可以是在body标签上设置以删除水平滚动条。

这个解决方案似乎只有在进行滚动的主体时才有效。任何其他具有overflow-x：hidden的div都会使滚动条下的任何内容消失，无论出于何种原因，这都不会发生在body标签上。

示例html文件：

<!doctype HTML>
<html>
  <body>
    <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    body {
      margin: 0;
      overflow-x: hidden;
    }

    #banner1, #banner2 {
      width: 100vw;
      height: 75%;
    }

    #banner1 {background: red}
    #banner2 {background: yellow}

    /* Creates a transparent scrollbar */
    ::-webkit-scrollbar {
      width: 16px;
    }
    ::-webkit-scrollbar-thumb {
      border: 4px solid rgba(0,0,0,0);
      background-clip: padding-box;
      background-color: rgba(255,255,255,0.5);
    }
    </style>
    <div id='banner1'></div>
    <div id='banner2'></div>
  </body> 
</html>

View this screenshot of the page working correctly.

在滚动条后面扩展元素

1 个答案: