Question

我正在尝试创建一个带有垂直滑块的网站，开头为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;
}

Here is a CodePen of it

我还尝试将我的第五和第六部分嵌套到将成为滑块一部分的部分中，但是这里的问题是当我在第六部分上并向上滚动一点时，它又回到了开头。第五部分

滚动困难

这是该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>

The codepen for this case

有什么主意，如果没有javascript如何解决呢？

如何结束快速滚动滑块

0 个答案: