Webkit 滚动条 - 隐藏父元素的滚动条 Y 但在子元素上保持可见

Question

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

webkit 有没有办法让滚动条在子节点上可见但在父节点上隐藏？

以下是示例 html 和 css。请注意，这不是实际使用的 html 和 css，我只是利用基本的 html 和 css 来解释问题。

HTML

<div class="parent-element">
    <div class="div-one">
       <p>Multi Line text</p>
    </div>
    <div class="div-two">
       <p>Multi Line text</p>
    </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%;
    padding: 20px;
    max-height: 700px;
    overflow-y: scroll;
}
.parent-element ::-webkit-scrollbar {
   display: none;
}
.div-one, .div-two, .div-three{
   width:100%;
    display: block;
}
.div-three .scrollable-list{
    width: 100%;
    max-height: 300px;
    overflow-y: scroll;
}
.parent-element .div-three ::-webkit-scrollbar {
    display: block;
}

Answer 1

因为您没有设置 div-3 的宽度，所以您认为父级的滚动条实际上​​是向右扩展的子级滚动条

.parent-element{
    width: 100%;
    max-height: 700px;
    
}

.div-three .scrollable-list{
width:50%;
    max-height: 300px;
    display: block;
    overflow-y: scroll;
}

<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>
                  <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
              <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
            <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
               <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
              <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
           <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
           <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
                <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
              <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
                 <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
                    <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
      
      </ul>
    </div>
</div>

Answer 2

尝试在父级上使用overflow-y: no-scroll;，在子级上使用overflow-y: scroll;，并去掉display: none和display: block

HTML：

<div class="parent-element">
<div class="div-one">
   <p>Multi Line text</p>
</div>
<div class="div-two">
   <p>Multi Line text</p>
</div>
<div class="div-three">
  <ul class="scrollable-list">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
      ...(500 more)
  </ul>
</div>

还有 CSS：

.parent-element{
    width: 100%;
    padding: 20px;
    max-height: 400px;
    overflow-y: no-scroll;
    overflow: hidden;
}
.parent-element ::-webkit-scrollbar {
}
.div-one, .div-two, .div-three{
   width:100%;
    display: block;
}
.div-three .scrollable-list{
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
}

Answer 3

不要给父母最大高度。

.parent-element{
    width: 100%;
    height: 130px;
    overflow-y: hidden;
}
.div-three{
    height: 100%;
    overflow-y: scroll;
}

<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>
          <li>List Item 4</li>
          <li>List Item 5</li>
          <li>List Item 6</li>
          ...(500 more)
      </ul>
    </div>
</div>