Question

我试图在一个静止的身体上面有一个弹跳的div。页面正文需要有overflow：hidden属性。

使用该属性，背景图像始终保持静态，但我想创建一个可以移动的居中div，就像它具有属性溢出一样：auto。

就像，当您位于页面顶部并继续滚动时，页面会略微下降。

我创建了一个居中的div，允许在静态主体的顶部滚动，但我无法找到创建页面效果的方法。

在这里：

＆＃13;

body{
  background-color: lightgrey;
  background-image: url('../img/mapD.svg');
  background-attachment:fixed;
  background-position: left top;
  overflow: hidden;
  position: absolute;
}

.c1{
  background-color: lightblue;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  position: relative;
}

.c2{
  background-color: yellow;
  width: 100px;
  height: 1000px;
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <div class="c1">
    <div class="c2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>

＆＃13;

用overflow：hidden属性滚动body上的div

0 个答案: