Question

我的图像顶部和底部有间距，用可滚动的div包裹，如下所示：

<div class="scroller">
    ::before
    <img source="blah"></img>
    ::after
</div>

但是，滚动条从最顶部开始，最后到达最底部。我的目标是在完全向上滚动时使滚动条与图像的高度相同，并停在图像的末尾。

橙色区域代表图像。

现在的样子：

这就是我想要的样子：

我尝试将图像包装在另一个div中并使其成为具有滚动条的div，但这不会起作用，因为当您向上滚动时图像不会超出滚动条。这些区域将不再可见：

Heres a demo

PS它只需要在chrome中工作，如果这样可以更容易：）

编辑：以下gif描述了为什么包裹它不是一个选项，顶部和底部（在第三张图片上用红色标记）永远不可见：

Answer 1

像这样的东西？：http://jsbin.com/puvonovafa/edit?html,css,output

.header,
.footer {
  width: 100vw;
  height: 10vh;
  background-color: yellow;
  position: fixed;
}
body {
  margin: 0
}
div.content {
  width: 100vw;
  background-color: orange;
  height: 80vh;
  top: 10vh;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
}
.footer {
  bottom: 0
}
div.scrollMe {
  height: 100vh;width:100vw;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="header">

  </div>
  <div class="content">
    <div class="scrollMe">test </div>
    
  </div>
  
  <div class="footer">

  </div>
</body>

</html>

Answer 2

这个怎么样？

HTML：

<div class="container">
  <div class="scroller">
      <img class="image">
  </div>
</div>

CSS：

.scroller{
  height: 300px;
  background-color: orange;
  overflow-y: scroll;
}

.container:before,
.container:after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background-color: yellow;
}

.image{
  height: 500px;
}

https://jsfiddle.net/ttaxofa3/2/

css垂直调整大小并重新定位滚动条

2 个答案: