Question 66395 in CSS Question posted in
Some basic documentation can be found here.

in Elementor how to make scroll snap just for some containers not all page – Css

I tried to apply some CSS on first of 3 containers and it worked fine, but the fourth container – which has no scroll snap – is not scrolling smoothly. Its kind if stuck under the third container.

Many thanks in advance.

I used this code in an Elementor page:

/* Set the root element for scroll snap */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Apply scroll snap effect to the container */
.scroll-snap-container {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}
Tags:

2

Answers


  1. 0

    Just add scroll-snap-container class to the 4th container and it will work.

    EDIT:

    The situation is that there is no background on the 4th container, and the attachment is fixed for the entire site, hence the background "repeats" itself, so the effect won’t be seen until you add a background to the container.

    You also have to add the following CSS code to the containers after the 3rd:

    scroll-snap-align: start;
    Login or Signup to reply.
  2. 0

    You could achieve that using the premium addons for elementor plugin.
    It has a vertical scroll widget that allows to have the scroll snap only on the sections inside the widget.

    You can see the tutorial here:
    Vertical Scroll Widget Tutorial

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search