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

问题描述

我有一个外部元素，其中包含max-height和overflow-y:scroll。我不想在.parent-element上显示滚动条，因此我正在使用::-webkit-scrollbar。但是，在.parent-element中，我也有一个孩子，其最大高度和overflow-y: scroll也是最大的，我希望在尝试将display: block应用于孩子的::-webkit-scrollbar时使滚动条可见元素被父级元素忽略和覆盖，最终导致滚动条在两者上都不可见。

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;
}

解决方法

不要给父母最大身高。

.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>

,

尝试对父母使用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;
}

,

由于您未设置div的宽度，因此您认为父级的滚动条实际上​​是扩展到右侧的子级的滚动条。

.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>