垂直卷轴扣除实现不起作用

Question

我有一个带有某些语义UI样式的React应用程序。我正在尝试通过网站的各个部分来实现卷轴快照。我尝试添加卷轴扣式：y强制性；和卷轴扣空：start;在身体和这样的部分中：

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
"Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica 
Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-snap-type: y mandatory;
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
   height: 100vh;
  scroll-snap-align: start;
}

，我还将其添加到容器和部分中：

 .container {
  width: 100%;
  height: 100%;
  color: white;
  scroll-snap-type: y mandatory;
} 
 section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
       height: 100vh;
      scroll-snap-align: start;
    }

我还尝试过像布拉德·特拉弗斯(Brad Traversy(在他的一个视频中所做的那样实施它。我添加了溢出：隐藏；在身体和容器中看起来像这样

.container {
  width: 100%;
  height: 100%;
  color: white;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
} 
section {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
           height: 100vh;
          scroll-snap-align: center;
    }

也没有工作。

我还使用了React应用程序中从Smantic-UI导入的容器，因此我不确定是否与此有关，但是当我尝试以这种方式实现时，滚动条也会消失。<<<<<<

Answer 1

解决了问题。我相信本节中的flexbox阻止了我使用滚动snap