CSS縦サイズを変更し、私はそうのようにスクロール可能なdiv要素でラップトップとボトムの間隔で画像を、持っているスクロールバーに

の位置を変更：CSS縦サイズを変更し、私はそうのようにスクロール可能なdiv要素でラップトップとボトムの間隔で画像を、持っているスクロールバーに

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

しかし、スクロールバーが一番上に始まり、で終了非常に底。私の目標は、スクロールバーを完全にスクロールアップしたときに画像と同じ高さで開始させ、画像の最後で停止させることです。

橙色の領域はイメージを表します。それが今のように見える何

：

これは、私はそれが見えるようにしたいものです：私は別のdivに画像をラッピングし、divのスクロールバーを持っていることを作ってみました

が、それはうまくいきません。なぜなら、あなたが上にスクロールすると、スクロールバーの上に画像が上がらないからです。これらの領域はもう見えない：それは、それが容易になります場合にのみクロームで作業する必要

相続人a demo

PS :)

編集：それをラップすることはない理由を次のgifを視覚化オプションの場合、上部と下部（3番目の写真の赤色で表示）は決して表示されません。

出典

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縦サイズを変更し、私はそうのようにスクロール可能なdiv要素でラップトップとボトムの間隔で画像を、持っているスクロールバーに

答えて

関連する問題