我正在尝试创建一个带有垂直滑块的网站,开头为4个部分,然后我想回到没有滑块的正常滚动,但是问题是我的前4个部分都在“滚动块”中因此,如果我转到第五部分,则可以滚动前四部分的所有内容而无需离开第五部分。
就像一个overflow: scroll
index.html
<div class='slider'>
<section class='slide one'></section>
<section class='slide two'></section>
<section class='slide three'></section>
<section class='slide four'></section>
</div>
<div class='no-slider'>
<section class='normal five'></section>
<section class='normal six'/></section>
</div>
index.css
.slider {
overflow-y: auto;
height: 100vh;
scroll-snap-type: y mandatory;
}
.slide {
height: 100%;
scroll-snap-align: start
}
.normal {
height: 500px;
}
.one {
background-color: black;
}
.two {
background-color: darkblue;
}
.three {
background-color: brown;
}
.four {
background-color: purple;
}
.five {
background-color: white;
}
.six {
background-color: indigo;
}
我还尝试将我的第五和第六部分嵌套到将成为滑块一部分的部分中,但是这里的问题是当我在第六部分上并向上滚动一点时,它又回到了开头。第五部分
滚动困难
这是该HTML文件(css不变)
<div class='slider'>
<section class='slide one'></section>
<section class='slide two'></section>
<section class='slide three'></section>
<section class='slide four'></section>
<div class='no-slider'>
<section class='normal five'></section>
<section class='normal six'/></section>
</div>
</div>
有什么主意,如果没有javascript如何解决呢?