CODEWITHSUNDEEP
cssangularscrollscroll-snapscroll-snap-points
Cookie
Cookie

Reputation: 37

Does someone know how to implement snap scrolling in Angular?

My page consists of 3 components: "navbar", "product details" and "footer" as it shows in the picture.

page structure

As you can see product details component has 3 sections. Each of them except first one (100vh - 4.5rem) has height of 100vh.

I want to use snap scrolling on each section in product details (when i scroll down to half of the first section it scrolls automatically to sections two e.t.c).

In pure html and css code you need to apply properties connected with parent-child relationship:

HTML:

      <div class="parent">

        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>

      </div>

CSS:

.parent{
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.child{
  scroll-snap-align: start;
}

Does someone know how to apply snap scrolling on sections in Angular? Thank you in advance.

I want the effect: https://alvarotrigo.com/fullPage/

Upvotes: 0

Views: 768

Answers (0)

Related Questions