css vertically resize and reposition scrollbar
<p>I have an image with spacing on the top and the bottom, wrapped with a scrollable div like so:</p>

<pre><code>&lt;div class="scroller"&gt;
    ::before
    &lt;img source="blah"&gt;&lt;/img&gt;
    ::after
&lt;/div&gt;
</code></pre>

<p>However, the scrollbar starts at the very top and ends at the very bottom.
My goal is to make the scrollbar start at the same height as the image when fully scrolled up, and stop at the end of the image.</p>

<p>The orange area represents the image.</p>

<p>What it looks like right now: <a href="https://i.stack.imgur.com/UwMz0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwMz0.png" alt="Original"></a></p>

<p>this is what I want it to look like: <a href="https://i.stack.imgur.com/JVEpA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JVEpA.png" alt="Goal"></a></p>

<p>I tried wrapping the image in another div and making that the div that has the scrollbar, but that won't work, because then when you scroll up the image will not go above the scrollbar. These areas would not be visible anymore: <a href="https://i.stack.imgur.com/5PIP0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5PIP0.png" alt="enter image description here"></a></p>

<p>Heres <a href="http://codepen.io/L0laapk3/pen/YWYpLk?editors=1100" rel="nofollow noreferrer">a demo</a></p>

<p>PS It only needs to work in chrome if that makes it easier :)</p>

<p>edit: The following gif visualises why wrapping it is not an option, the top and bottom parts (marked in red on the third picture) would never be visible:<a href="https://i.stack.imgur.com/emKth.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/emKth.gif" alt="enter image description here"></a></p>