Scroll focus when reaching the end of a scrollable element

Hi friends,

I'd like to chat about scroll focus when reaching the end of a scrollable
element.

In most modern browsers, when you scroll to the end of a scrollable element
(i.e. overflow-y: scroll applied), scroll focus bubbles up to the next
scrollable element. Here's a quick codepen example of that
<http://codepen.io/ericandrewlewis/pen/neHEG>, and a video example
<https://www.youtube.com/watch?v=ZvWlzlUGkjU&feature=youtu.be>.

This makes moving through the content of a scrollable element a touchy user
experience: if you try to quickly scroll through it, you run the risk of
losing your place in the page.

I would love control over this in CSS, so that I can explicitly declare
that a container should own scroll focus when it is being interacted with
by mouseover or touch swiping.

There are a number of Javascript libraries that let you create scrollable
elements which have built-in support with this alternate behavior - see
Control.scrollBar <http://livepipe.net/control/scrollbar> and jQuery Custom
Scrollbar
<http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/nested_scrollbars_demo.html>.
These libraries also implement custom scrollbars, but that's not a part of
this discussion.

Eric Andrew Lewis