问题描述
在我当前的项目中，我正在尝试使用 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 (将#修改为@）