首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在绝对定位上没有滚动

在绝对定位上没有滚动
EN

Stack Overflow用户
提问于 2018-10-08 01:05:03
回答 1查看 67关注 0票数 1

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

}

我们的目标是让动画在每个分辨率的中心与全视口高度,这就是为什么我使用绝对定位,然后操纵它的值。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-08 01:12:10

更新:

有了新的示例代码,我看不出你需要保持视频绝对的理由,100vh和100vw还不够吗?

JSFiddle

原文:

您的所有内容都是绝对定位的,在正常的文档流中没有留下任何内容来提供滚动的正文高度。

在不知道为什么div元素“必须”是绝对的情况下,最简单的解决方案是不给under-animationVideoAnimation位置绝对的位置,而是简单地给它一个100vh的上边距。这会将元素保留在文档流中,并仍然补偿视频的空间。

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52690872

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档