Question

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test.css" >
</head>
<body>
  <div class="div div__site">
  <div class="div div__videoWrap">
    <video id="bgVideo" autoplay muted loop  controls class="video-block__video">
      <source type='video/mp4'  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    </video>
  </div>

    <section style="background-color: aqua;"  class="sec sec__two"><p>Sec2</p></section>

  </div>
</body>
</html>

我的CSS

.div.div__videoWrap{
  width:100%;
  height:100%;
}
.div.div__videoWrap #bgVideo{
 object-fit: cover;
  width:100%;
  height:100%;
}
.sec.sec__two{
  height:1000px;
}

没有视频标签，一切正常。但是使用video标签，如果我刷新页面（在2-3次刷新点击内），页面就会向下滚动，并且我还没有编写JavaScript。我在google中搜索但没有找到有用的代码。刷新页面后，我也不想使用window.scrollTo(0, 0);滚动到顶部。请帮助...，谢谢您

Answer 1

.div.div__videoWrap{
      width:100%;
      height:100%;
    }
    .div.div__videoWrap #bgVideo{
     object-fit: cover;
      width:100%;
      height:100%;
    }
    .sec.sec__two{
      height:1000px;
    }
    .div__site{
      overflow-anchor: none;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
</head>
<body>
  <div class="div div__site">
  <div class="div div__videoWrap">
    <video id="bgVideo" autoplay muted loop  controls class="video-block__video">
      <source type='video/mp4'  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    </video>
  </div>

    <section style="background-color: aqua;"  class="sec sec__two"><p>Sec2</p></section>

  </div>
</body>
</html>

我在您的代码中添加了一个CSS效果，请尝试

Answer 2

您的问题有点误导了。在检查代码时，您似乎希望使页面停留在嵌入视频的顶部。

您可以通过添加溢出属性来实现。在您的CSS中，只需添加以下 overflow-anchor：无；

这是您的更改：

.div.div__videoWrap{
width:100%;
height:100%;
}
.div.div__videoWrap #bgVideo{
overflow-anchor: none;
object-fit: cover;
width:100%;
height:100%;
}
.sec.sec__two{
height:1000px;
}

如果您想了解有关此溢出属性的更多信息，可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

刷新html页面后页面即使没有添加js也会自动滚动

2 个答案: