Question posted in
The full documentation can be found here.

Divi theme – Getting Snap Scrolling to work in WordPress

I’m wondering if anyone has had any luck getting snap scrolling to work in WordPress? I notice there is a similar question from 5 years on WPD SE that didn’t get any answers.

I’m working with the Divi theme. This is my test page.

I used this technique to find which element owns the scrollbar. The element is body.

So I tried the following custom CSS code…

body {
  scroll-snap-type: y mandatory; 
}

Then, in the child div I want to snap to I’ve added:

scroll-snap-align: start;

This didn’t work. So I tried setting scroll-snap-type: y mandatory; instead for #page-container, and then for #et-boc which are the two child elements of body that are also just the height of the viewable area. This didn’t work either.

I’ve managed to get snap scrolling working in a CodePen, so I know that my code is, in theory, correct.

Any ideas anyone? Thanks!

Tags:

2

Answers


  1. 0

    This would also be possible using a plugin like Plus Addons they call this feature full page scroll. Basically it’s definig sections that work as independent full screen parts. Be careful with responsiveness using these.

    Login or Signup to reply.
  2. 0

    The linked page doesn’t work anymore and your CodePen is different from what you are describing (classes added to divs instead of body). But this worked for my WordPress installation:

    html {
  overflow: hidden; /* Makes sure there is no scroll bar added for the html element */  
}

body {
  height: 100vh; /* Body as high as viewport */
  scroll-snap-type: y mandatory;
  overflow-y: scroll; /* Add scroll bar for content outside of viewport */
}

.scroll-target, nav { /* Make sure also to add nav and footer to make them reachable by scrolling */
  scroll-snap-align: start;
}

footer {
  scroll-snap-align: end;
}

div.scroll-target {
  height: 200px;
  margin-bottom: 200px;
}

nav {
  margin-bottom: 200px
}
    <html>

<body>
  <nav>This is a navigation</nav>
  <div class="scroll-target" style="background-color:red">This is a div</div>
  <div class="scroll-target" style="background-color:green">This is a div</div>
  <div class="scroll-target" style="background-color:yellow">This is a div</div>
  <div class="scroll-target" style="background-color:pink">This is a div</div>
  <footer>This is a </footer>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search