内容上方的滚动条，覆盖在一半时起作用

Question

我需要：

1. 滚动条不占空间/宽度不占滚动容器（.viewport）
2. 滚动条轨道/背景要透明
容器（.content）的
3. （.viewport）在滚动条拇指下可见

首先我是通过将（.viewport）overflow-y设置为overlay的值来完成的。 第二我是通过将background: transparent;设置为::-webkit-scrollbar来做到的。第三应该会发生，但不会发生。

屏幕截图中的绿色bg来自（.viewport），但是应该有深蓝色的bg，带有来自（.content）的文本。

---

代码和jsfiddle：

https://jsfiddle.net/h2e6dumo/

::-webkit-scrollbar {
  width: 12px;
  background: transparent;
}

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

 ::-webkit-scrollbar-track {
  visibility: hidden;
}

.viewport {
  width: 200px;
  height: 200px;
  overflow-y: overlay;
  overflow-x: hidden;
  background-color: green;
}

.content {
  width: 100%;
  background: #000044;
  color: gray;
}

<div class="viewport">
  <div class="content">Praesent leo metus, aliquet non orci facilisis, rhoncus aliquet tellus. Curabitur est libero, commodo luctus diam eu, mattis tempus est. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
    finibus enim interdum odio placerat pulvinar. Fusce ac rhoncus lorem. Etiam ultrices, velit eu ultrices lobortis, mi quam accumsan tellus, ac vehicula lectus odio in tellus. Duis euismod, velit et ultricies viverra, tellus lectus ornare enim, molestie
    sodales lectus nisi dignissim leo. Donec consequat nisi quis dui scelerisque, ac ultricies nisl placerat. In ut nunc feugiat, gravida lacus non, sagittis ante. Mauris urna tellus, mattis ac libero at, gravida fermentum leo. Curabitur neque leo, convallis
    tempus massa in, sollicitudin euismod enim. Phasellus velit eros, porttitor nec laoreet vitae, interdum id ex. Nulla nec elementum massa.</div>
</div>