垂直滚动捕捉实现不起作用
Vertical scroll-snap implementation not working
我有一个带有语义 ui 样式的 React 应用程序。我正在尝试对我网站的各个部分实施滚动捕捉。我尝试添加 scroll-snap-type: y mandatory;和滚动对齐对齐:开始;在像这样的正文和部分中:
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 导入的容器,所以我不确定这是否与它有任何关系,但是当我尝试以这种方式实现时,滚动条也会消失。
已解决问题。我认为该部分中的 flexbox 阻止了我使用 scroll snap
我有一个带有语义 ui 样式的 React 应用程序。我正在尝试对我网站的各个部分实施滚动捕捉。我尝试添加 scroll-snap-type: y mandatory;和滚动对齐对齐:开始;在像这样的正文和部分中:
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 导入的容器,所以我不确定这是否与它有任何关系,但是当我尝试以这种方式实现时,滚动条也会消失。
已解决问题。我认为该部分中的 flexbox 阻止了我使用 scroll snap