我的html伪代码是这样的:
<div>
<VideoAnimation />
<div className="under-animation">
// a lot of content goes here
</div>
</div>
问题是,VideoAnimation组件有绝对定位,高度为100vh (肯定是这样)。因为这是从文档流中去掉的。Under-section应该紧跟在动画之后(因此它模仿了相对定位行为),所以我决定也给它绝对位置-它从顶部开始: 100vh。但这导致了一些我意想不到的事情,即。我不能再在页面上滚动了。我可以使用右边的滚动条来滚动它,但是不能在我的鼠标垫上使用它。相对定位不存在问题。谢谢!
我的VideoSection组件如下所示:
import React, {Component} from 'react';
render() {
return (
<div className="video__container">
<video autoPlay muted className="myVideo">
<source
src="https://res.cloudinary.com/da0fiq118/video/upload/c_scale,h_600/v1538825517/animation.mp4" type="video/mp4" />
</video>
</div>
);
}
}
export default VideoAnimation;
和scss文件:
.video {
&__container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
.myVideo {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
@supports (transform: translateX(-50%)) {
.myVideo {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
@media screen and (min-aspect-ratio: 16/9){
.myVideo {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
@media screen and (max-aspect-ratio: 16/9){
.myVideo {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
我们的目标是让动画在每个分辨率的中心与全视口高度,这就是为什么我使用绝对定位,然后操纵它的值。
发布于 2018-10-08 01:12:10
更新:
有了新的示例代码,我看不出你需要保持视频绝对的理由,100vh和100vw还不够吗?
原文:
您的所有内容都是绝对定位的,在正常的文档流中没有留下任何内容来提供滚动的正文高度。
在不知道为什么div元素“必须”是绝对的情况下,最简单的解决方案是不给under-animation
的VideoAnimation
位置绝对的位置,而是简单地给它一个100vh的上边距。这会将元素保留在文档流中,并仍然补偿视频的空间。
需要明确的是,这也是一个不太理想的设置,如果事情发生变化,可能会遇到问题,但如果没有更多的信息,这是最容易给出的。
https://stackoverflow.com/questions/52690872
复制相似问题