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垂直調整和重新定位的滾動條

回答

相關問題