0

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/

Cookie
  • 17
  • 3
  • Please provide enough code so others can better understand or reproduce the problem. – Community Feb 07 '23 at 10:59
  • I feel you're looking for `scroll-snap-type: y proximity;` in parent, see [docs in mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) – Eliseo Feb 07 '23 at 12:29
  • thanks @Eliseo but in know how scroll-snap-type works in pure css/html. Im struggling with implementing this using angular :( – Cookie Feb 07 '23 at 12:49
  • Angular can use .css. If you want to use a kind of "intersection observer", check this [SO](https://stackoverflow.com/questions/75067679/is-there-a-function-to-update-the-variable-of-the-selected-item-after-scrolling/75075315#75075315) – Eliseo Feb 07 '23 at 14:32

0 Answers0