如何解决子 div 上的滚动不完整？
在我当前的项目中，我正在尝试使用 slick 创建一个轮播滑块。不幸的是，我一直遇到一个特定的问题：如果子 div (myDiv) 中的文本比父 div (gsSlider) 长，则生成的滚动条不会完全显示，因此不会滚动到最后文本。
将父级的溢出设置为 auto 而不是 hidden 允许我正确滚动到最后，但我实际上并不希望我的父级 div 重新调整大小。有没有办法可以保持父 div 的大小不变并将所有溢出限制到子级（从而允许我滚动到最后而不调整大小）？
有关示例，请参阅下面的代码。第一页应该显示精细，但使用向右箭头移动到下一张幻灯片或圆点应该显示一大堆文本，无法正确滚动到末尾。
<!doctype html>
<html>
<head>
<Meta charset="UTF-8">
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css"/>
<style type="text/css">
.gsSlider {
max-width: 100vw;
max-height: 100vh;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.slick-next:before {
color: white;
}
.slick-prev:before {
color: white;
}
.slick-next {
right: 25px;
}
.slick-prev {
left: 25px;
z-index: 9;
}
.slick-dots {
bottom: 25px;
z-index: 9;
}
.slick-dots li button:before {
color: #666666;
font-size: 14px;
opacity: 1;
}
.slick-dots li.slick-active button:before {
color: #999999;
}
.slick-dotted,.slick-slider {
margin-bottom: 0 !important;
}
.slick-slide {
height: 100vh;
width: 100vw;
}
.myDiv {
margin: 1vh;
padding: 10vw;
background-color: #ffffff;
overflow-y: scroll;
text-align: justify;
text-justify: inter-word;
font-family: Helvetica;
font-size: 100%;
}
h2 {
color: #295c79;
font-family: Helvetica;
font-size: 150%;
line-height: 100%;
margin-bottom: 0px;
margin-top: 0px;
}
h3 {
color: darkgrey;
font-family: Helvetica;
font-size: 100%;
line-height: 100%;
margin-bottom: 5%;
margin-top: 0px;
}
p {
color: #152d3b;
font-family: Helvetica;
font-size: 80%;
}
</style>
</head>
<body>
<div class="gsSlider">
<div class="myDiv" style="background-color:rgba(41,92,121,0.1);">
<h3> May 2021 </h3>
<h2>A homepage!</h2>
<p>This element should show latest news. For Now,it doesn't show anything. This will change,in time. Lorem ipsum dolor sit amet.</p>
</div>
<div class="myDiv" style="background-color:rgba(41,0.1);">
<h2>This is a heading in a div element</h2>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="myDiv" style="background-color:rgba(41,0.1);">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<div class="myDiv" style="background-color:rgba(41,0.1);">
<h3> May 2021 </h3>
<h2>Blorb</h2>
<p>Blorb blarb blorb. Lorem ispum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gsSlider').slick({
infinite: true,slidesToShow: 1,slidesToScroll: 1,dots: true,});
});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
