Question

我的html伪代码如下：

  <div>
    <VideoAnimation />
    <div className="under-animation">
      // a lot of content goes here
    </div>
  </div>

问题是VideoAnimation组件具有绝对定位，并且高度为100vh（必须这样）。因此，这是从文档流中取出的。下半部应该紧随动画之后（以便模仿相对定位行为），因此我决定也给它绝对位置-它从顶部开始：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;
  }

}

目标是在所有分辨率下以全视口高度在中心放置动画，这就是为什么我使用绝对定位然后操纵其值的原因。

Answer 1

更新：

使用新的示例代码，我看不到您需要保持视频绝对的原因，100vh和100vw不够吗？

JSFiddle

原始帖子：

所有内容都是绝对放置的，普通文档流中没有剩余内容可以使正文高度滚动。

在不知道为什么VideoAnimation元素“必须”为绝对值的情况下，最简单的解决方案是不给under-animation div位置绝对值，而只是给它100vh的最高边距。这样可以将元素保留在文档流中，并且仍然可以补偿视频的空间。

要清楚，这也是一种不太理想的设置，如果情况发生变化，它可能会出现问题，但是如果没有更多信息，这是最容易提供的设置。

绝对定位无滚动

1 个答案:

更新：

原始帖子：