javascript - 绝对定位不滚动

Question

我的 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;
  }

}

目标是在每个分辨率的中心都有动画，并具有完整的视口(viewport)高度，这就是我使用绝对定位然后操纵其值的原因。

Answer 1

更新:

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

JSFiddle

原帖:

您的所有内容都是绝对定位的，正常文档流中没有剩余的内容可以让主体高度滚动。

不知道为什么 VideoAnimation 元素“必须”是绝对的，最简单的解决方案是不给 under-animation div 绝对位置，而是简单地给它一个100vh 的最高利润率。这使元素保持在文档流中，并且仍然补偿视频的空间。

要明确的是，这也是一个不太理想的设置，如果情况发生变化可能会遇到问题，但如果没有更多信息，这是最容易提供的设置。