我有一个带有max-height和overflow-y:scroll的外部元素。我不想让滚动条在。parent-元素上可见，因此我使用::-webkit-scrollbar。但是，在.parent-element中，我也有一个具有max-height和overflow-y:scroll的子元素，我希望使滚动条可见，当尝试在子元素的::-webkit-scrollbar上应用display:block时，它将被父元素忽略并覆盖，结果滚动条在两个元素上都不可见。

在webkit上有没有一种方法可以使滚动条在子项上可见，而在父项上隐藏？

下面是html和CSS的示例。

HTML

<div class="parent-element">
    <div class="div-one">
    </div>
    <div class="div-two">
    </div>
    <div class="div-three">
      <ul class="scrollable-list">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
          ...(500 more)
      </ul>
    </div>
</div>

CSS

.parent-element{
    width: 100%;
    max-height: 700px;
    overflow-y: scroll;
}
.parent-element ::-webkit-scrollbar {
   display: none;
}
.div-three .scrollable-list{
    max-height: 300px;
    overflow-y: scroll;
}
.parent-element .div-three ::-webkit-scrollbar {
    display: block;
}