如何在webkit覆盖中获取透明滚动条

Question

我已经看了一下，但还没有找到一个有效的例子 - 至少在Chrome中。我可以在-webkit-scrollbar上设置颜色（参见plunker），它允许设置一个alpha值，但下面的文本没有显示，如果你正在进行叠加，这似乎很重要。

＆＃13;

＆＃13;

    .main::-webkit-scrollbar {
      width: 20px;
      background-color: rgba(0, 200, 0, 0.1);
    }

    .main::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: rgba(255, 0, 0, 0.8);
    }

    .main {
      white-space: nowrap;
      height: 100px;
      overflow-y: overlay;
      background-color: #eee;
    }

＆＃13;

    <div class="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5 Resize the  window so that some text is under the green, supposedly transparent, scrollbar)
      <div>6</div>
      <div>7</div>
      <div>etc</div>
      <div>etc</div>
      <div>etc</div>
    </div>
      

＆＃13;

＆＃13;

＆＃13;

有办法做到这一点吗？

plunker