0
看看圖片，請：垂直滾動的div容器內
我希望得到這樣的結果：
我有具有.row許多可垂直滾動的列元素。問題是head元素（.ion-content> .scroll-content）擴展了滾動條。 如何讓head元素中的滾動條處於活動狀態但不滾動？ （第二個屏幕）。
我的代碼：
header.nav {
left: 0;
top: 0;
position: absolute;
z-index: 10;
display: block;
width: 100%;
background-color: red;
}
header.nav .toolbar {
padding: 0px;
min-height: 56px;
}
.tabs {
left: 0;
top: 0;
position: absolute;
z-index: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.tabs .tabbar {
left: 0;
bottom: 0;
background-color: #132843;
opacity: 1;
position: absolute;
z-index: 10;
display: flex;
width: 100%;
}
.tabs .tabbar a.button {
min-height: 56px;
font-weight: normal;
color: rgba(123, 122, 122, 0.7);
padding: 0;
}
.tabs .tabpanel {
left: 0;
top: 0;
position: absolute;
z-index: 0;
display: block;
width: 100%;
height: 100%;
contain: strict;
overflow: hidden;
}
.gallery-page.ion-page {
left: 0;
top: 0;
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.ion-content {
left: 0;
top: 0;
position: absolute;
color: #212121;
background-color: gray;
display: block;
width: 100%;
height: 100%;
contain: layout size style;
}
.ion-content > .fixed-content {
margin-top: 56px;
margin-bottom: 56px;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
display: block;
}
.ion-content > .scroll-content {
margin-top: 56px;
margin-bottom: 56px;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
will-change: scroll-position;
contain: size style layout;
}
.grid {
margin-left: auto;
margin-right: auto;
width: 100%;
display: flex;
flex-direction: column;
padding: 0;
}
.grid .row {
display: flex;
flex-wrap: wrap;
}
.grid .row .col {
padding: 5px;
position: relative;
width: 100%;
margin: 0;
min-height: 1px;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.grid .row .col .scrolly {
width: 100%;
height: 100vh;
position: relative;
display: block;
}
.grid .row .col .scrolly .scroll-content {
overflow-y: auto;
overflow-x: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
will-change: scroll-position;
}<div class="page">
<header class="nav">
<div class="toolbar"></div>
</header>
<div class="tabs">
<div class="tabbar"><a class="button"></a></div>
<div class="tabpanel">
<div class="gallery-page ion-page">
<div class="ion-content">
<div class="fixed-content"></div>
<div class="scroll-content">
<div class="grid">
<div class="row">
<div class="col">
<div class="scrolly">
<div class="scroll-content">
<p>
(I) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.
Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
</p>
</div>
</div>
</div>
<div class="col">
<div class="scrolly">
<div class="scroll-content">
<p>
(II) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.
Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>JS小提琴：https://jsfiddle.net/s4yLywqj/
你有類似的問題，你能幫助我嗎？
組'溢出-Y：hidden'到'.ion內容> .scroll-content'。然後一個快速的方法讓你滾動，直到文本的結尾添加一個填充底部（〜50px）到'.scroll-content> p' –
頭元素中的滾動條必須是可見的，但不可滾動。例如：https://jsfiddle.net/s4yLywqj/1/（在頁面中添加一個margin-bottom〜120px到.scrolly .scroll-content）滾動條是很好的，但不幸的是head元素滾動條是可滾動的。 – Piotr
@Piotr這可能會幫助你解決你的問題，請查看https://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it – Adeel