css - 垂直滚动捕捉实现不起作用
问题描述
我有一个带有一些语义 UI 样式的反应应用程序。我正在尝试使用我的网站部分实现滚动快照。我尝试添加 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;
}
我也尝试过像布拉德·特拉弗西在他的一个视频中所做的那样来实现它。我添加了溢出:隐藏;在身体和容器看起来像这样
.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 阻止我使用滚动快照
推荐阅读
- ios - RxSwift 中有没有办法观察数组内部的变化而不设置新值?
- javascript - 如何获得整个网页的高度?javascript
- node.js - 如何在等待/异步中返回承诺的价值,而不是承诺本身?
- php - 在 PHP Laravel 5.1 中验证必须包含字母、数字和特殊字符的密码
- javascript - 如何在javascript中搜索列表中的项目?
- python - 使用列表的 print 和 tkinter 文本框的不同输出
- java - ClassCast 异常:子类实现在调用超类方法时抛出异常
- reactjs - 不变违规:“borderLeft”不是有效的样式属性
- c++ - 键盘模拟器
- r - echarts4r:液体填充颜色