如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。