如何滚动 div 内的内容但不滚动父容器？
How can I scroll content inside div but not scroll parent container?
我有基于网格的布局，在容器 (main) 中有两列（aside 和 section）。每列都应该单独滚动，但容器根本不应该滚动。两列的高度都是动态的，但容器的高度是固定的。
我在父容器上尝试了两种使用 overflow-y 的方法：
- With
overflow-y: scroll 但是....当我在一个子 div 中完成滚动时，例如 (aside) 整个容器 (main) 开始滚动不是我想要。
- 使用
overflow-y: hidden 但是 .... 然后可滚动子 div 中的内容被剪切，比如
这里：
cut content inside child scrollable divs when parent has overflow-y to hidden
我也厌倦了 overscroll-behaviour 属性 但它似乎不起作用，我不知道为什么。
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: scroll;
/*hidden cuts my content */
max-height: 400px;
}
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
这里是这个案例的片段：
https://jsfiddle.net/Lgeayx4u/3/
是否可以用 pure CSS 做我想做的事？我想避免 JS.
如果你不希望外层容器滚动并且保持固定高度，那么你肯定无法获得 aside 和 section 的完整内容部分。更好的选择是让他们继承容器的高度并在容器上设置overflow-y: hidden：
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: hidden;
/*hidden cuts my content */
height: 300px;
}
section, aside{ height: 100%; }
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
我有基于网格的布局，在容器 (main) 中有两列（aside 和 section）。每列都应该单独滚动，但容器根本不应该滚动。两列的高度都是动态的，但容器的高度是固定的。
我在父容器上尝试了两种使用 overflow-y 的方法：
- With
overflow-y: scroll但是....当我在一个子 div 中完成滚动时，例如 (aside) 整个容器 (main) 开始滚动不是我想要。 - 使用
overflow-y: hidden但是 .... 然后可滚动子 div 中的内容被剪切，比如 这里： cut content inside child scrollable divs when parent has overflow-y to hidden
我也厌倦了 overscroll-behaviour 属性 但它似乎不起作用，我不知道为什么。
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: scroll;
/*hidden cuts my content */
max-height: 400px;
}
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
这里是这个案例的片段： https://jsfiddle.net/Lgeayx4u/3/
是否可以用 pure CSS 做我想做的事？我想避免 JS.
如果你不希望外层容器滚动并且保持固定高度，那么你肯定无法获得 aside 和 section 的完整内容部分。更好的选择是让他们继承容器的高度并在容器上设置overflow-y: hidden：
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: hidden;
/*hidden cuts my content */
height: 300px;
}
section, aside{ height: 100%; }
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>