The scroll bar becomes inaccessable when the header is larger than the scrollbar is

[akc42]

Description

I am attempting to construct a nested scroll bar some way down the page Unfortunately, all though it all works, you can't actually grab to scoll bar when it scrolled to the top because its invisible hidden behind something.

Expected outcome

Click and hold on scroll bar section and pull the mouse downwards will scroll down

Actual outcome

Whilst you can scroll easily enough by clicking in the empty space in the scroll bar, you can't click and hold the scolll bar and move it downwards. It appears there is something over the top of it.

Live Demo

http://jsbin.com/zozuzav/edit?html,output

Steps to reproduce

Load the page and attempt to scroll down by selecting the actuall scroll bar section in the region of the toolbar halfway down the exiample page.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10