垂直滚动捕捉实现不起作用

Posted 2023-03-06

【中文标题】垂直滚动捕捉实现不起作用

【英文标题】：Vertical scroll-snap implementation not working

【发布时间】：2019-11-07 17:07:42

【问题描述】：

我有一个带有一些语义 UI 样式的 React 应用程序。我正在尝试使用我的网站部分实现滚动快照。我尝试添加 scroll-snap-type: y 强制；和滚动对齐对齐：开始；在像这样的正文和部分中：

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 应用程序中使用从语义 UI 导入的容器，所以我不确定这是否与它有关，但是当我尝试以这种方式实现时，滚动条也会消失。

【参考方案1】：

解决了这个问题。我相信该部分中的 flexbox 阻止我使用滚动快照