css - CSS“滚动快照”故障排除

Question

我正在尝试在我的水平滚动网页上做简单的滚动快照 css，但它不起作用。关于做什么的任何想法？我的网页是 jakobnatorp.com。似乎 scroll-snap-type 和 scroll-snap-align 不是有效的命令，它们在我的 css-tool 中标记为红色。我正在为 wordpress 使用 css 插件。

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;
}

感谢所有帮助！

Answer 1

scroll-snap 生效时出现问题，结果将 scroll-snap-type 添加到父级不起作用，我必须将其添加到 html 中。在 html 上隐藏溢出也会禁用滚动捕捉。