CSS整页滚动效果不起作用

【问题标题】：CSS Full Page Scroll Effect Is Not WorkingCSS整页滚动效果不起作用
【发布时间】：2021-09-14 01:05:40
【问题描述】：

我在link 上遵循了关于平滑滚动效果的教程。但它在我的页面上并没有真正奏效。我找不到问题出在哪里，有什么想法吗？

.thepage {
  height: 100vh;
  scroll-snap-type: mandatory;
  overflow-y: scroll;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

.bg {
  background-image: url("pic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}

<div class="thepage">
  <section class="bg">
    <div class="header">

      ELEMENTS IN THIS DIV

    </div>
    <div class="banner">
      <div class="bannerinner">

        ELEMENTS IN THIS DIV

      </div>
    </div>
  </section>
  <section class="aboutme">

    ELEMENTS IN THIS SECTION

  </section>
</div>

【问题讨论】：

标签： html css scroll

【解决方案1】：

把scroll-snap-type: mandatory;改成scroll-snap-type: y mandatory;就可以了。

问题是，您只定义了overflow-y: scroll

.thepage {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

.bg {
  background-image: url("pic.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}

<div class="thepage">
  <section class="bg">
    <div class="header">

      ELEMENTS IN THIS DIV

    </div>
    <div class="banner">
      <div class="bannerinner">

        ELEMENTS IN THIS DIV

      </div>
    </div>
  </section>
  <section class="aboutme">

    ELEMENTS IN THIS SECTION

  </section>
</div>

【讨论】：