CODEWITHSUNDEEP
htmlcssscroll
duruburak
duruburak

Reputation: 241

CSS full page scroll effect is not working

I followed the tutorial about smooth scroll effect on this link. But it didn't really work out on my page. I couldn't find where the problem is, any ideas?

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

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

    .bg {
      background-image: url("pic.png");
      overflow: hidden;
    }

    <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>

Upvotes: 0

Views: 242

Answers (1)

tacoshy
tacoshy

Reputation: 13012

Change the scroll-snap-type: mandatory; to scroll-snap-type: y mandatory; and it will work.

The issue is, that you only defined 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>

Upvotes: 1

Related Questions