18910140161

HTML-如何正确设置垂直滚动对齐CSS-堆栈溢出

顺晟科技

2022-10-18 13:07:57

110

我想创建一个网站。对于宽度为100VW和高度为100VH的多个部分,我还希望这些部分有一个强制的Y(垂直)捕捉。我已经签出了许多教程,但我的代码似乎不工作。任何帮助都非常感谢。

当前代码

<代码>正文{宽度:100%;保证金:0;背景色:白色;}正文.内容{宽度:100VW;高度:100%;Scroll-Snap-Type:必选;滚动-捕捉-点-Y:重复(300px);Scroll-Snap-Type:Y必填;}正文.内容部分{显示:Flex;Justify-content:中心;align-items:居中;宽度:100VW;高度:100VH;边框:1px纯黑色;Scroll-Snap-Align:开始;}
<代码><;DIV类=' content '>;<;部分>;1<;/部分>;<;部分>;2<;/部分>;<;部分>;3<;/部分>;<;部分>;4<;/部分>;<;/DIV>;


顺晟科技:

仅仅阅读Mozilla文档就会发现这个功能在不同浏览器之间高度不一致,但根据他们的指南,我设法让您的代码片段与这些更改一起工作:

<代码>正文.内容{高度:100VH;/*为100%*/溢出:自动;/*已添加*/}

<代码>正文{宽度:100%;保证金:0;背景色:白色;}正文.内容{宽度:100VW;高度:100VH;滚动-捕捉-点-Y:重复(300px);Scroll-Snap-Type:Y必填;Scroll-Snap-Type:必选;溢出:自动;}正文.内容部分{显示:Flex;Justify-content:中心;align-items:居中;宽度:100VW;高度:100VH;边框:1px纯黑色;scroll-snap-align:开始;}
<代码><;DIV类=' content '>;<;部分>;1<;/部分>;<;部分>;2<;/部分>;<;部分>;3<;/部分>;<;部分>;4<;/部分>;<;/DIV>;

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航