CSS垂直调整和重新定位的滚动条

我有在顶部和底部间隔的图像，具有可滚动的div包裹像这样：CSS垂直调整和重新定位的滚动条

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

然而，滚动条开始于最顶端，并在结束很底。我的目标是在完全向上滚动时使滚动条在与图像相同的高度处开始，并停止在图像的末尾。

橙色区域代表图像。

什么它看起来像现在：

这就是我想要它看起来像：

我试图在另一个DIV包装形象和制备具有滚动条的DIV，但这将无法正常工作，因为那么当您向上滚动图像时将不会在滚动条上方移动。这些区域将不可见了：

继承人a demo

PS它只需要在Chrome中工作，如果这使得它更容易:)

编辑：下面的GIF为什么形象化包裹它不是一个选项，顶部和底部部分（在第三张图片上标记为红色）将永远不可见：

来源

2016-07-14 L0laapk3

这样的事情？：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>

来源

2016-07-14 21:04:35

我已经编辑了问题，显示最后的图像作为图像，而不是为纽带，我希望它是更现在清除。 – L0laapk3

这个怎么样？

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/

来源

2016-07-14 21:16:52 mxlse

我编辑过这个问题，将最后一张图片显示为图片而不是链接，我希望现在更清楚。 – L0laapk3

CSS垂直调整和重新定位的滚动条

回答

相关问题