0

I'm trying to do simple scroll-snap css on my horizontal scrolling webpage, but it's not working. Any ideas on what to do? My webpage is jakobnatorp.com. It seems like scroll-snap-type and scroll-snap-align are not valid commands, they are marked with red in my css-tool. I'm using a css plug-in for wordpress.

CSS

/* master container */  
  .elementor {
  width: 100vh;
  height: 100vw;
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-snap-type: x mandatory;
  scroll-snap-type: mandatory;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  -ms-overflow-style: none;
}
  
/* sub-container */  
.elementor-section-wrap {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 580vw;
}

/* sections */
.section { 
width:80vw; 
height:100vh;
scroll-snap-align: start;
}

All help is appreciated!

Jakob Natorp
  • 49
  • 1
  • 1
  • 10

1 Answers1

1

Had an issue with scroll-snap taking effect, turns out adding scroll-snap-type to the parent wouldn't work, I had to add it to the html. Also having overflow hidden on the html will disable scroll-snap.

Denz
  • 11
  • 1