Scroll Snapping - IMPLEMENTATION PROBLEMS

Custom code
1

Hello Readymag community, I’m trying to give a hand to a friend thats need to do a Scroll Snapping in a web for a client.

I’m trying to implement this code:
https://codepen.io/team/css-tricks/pen/yLLqqgP

I try to call the containers for a class they all have in common it’s “rmwidge”, but then when I tray to saw if it’s works, of course the scroll snapping doesn’t woks and some text containers brokes.

This is the edited code I’m trying to implement.

After :

<script>
  
  const gra = function(min, max) {
    return Math.random() * (max - min) + min;
}
  
const init = function(){
	let items = document.querySelector('.rmwidget');
	cssScrollSnapPolyfill()
}
init();
  
  
</script>

CSS:

  • {
    box-sizing: border-box;
    }
    html {
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    }
    .rmwidget {
    border-bottom: 1px solid white;
    padding: 1rem;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    }

If some one could give me a hand I would be very greatfull,
already thanks all!

Sebastian.
2

Any chance you ever found a solve for this? Does anyone have an recommendations on how to implement snap scrolling?! Thank you!!!