Re: Scroll focus when reaching the end of a scrollable element

I agree this is a behavior web developers should be able to customize.
Another scenario it comes up in is when you have UI that is logically a
pop-up window (perhaps position:fixed).  Scrolling inside of it shouldn't
attempt to scroll any elements in it's containing block chain (I've seen
many websites in Chrome where the geyed-out page in the background scrolls
in such a case).

IE has -ms-scroll-chaining
<http://msdn.microsoft.com/en-ca/library/windows/apps/hh466007.aspx> for
precisely this problem.  Does that do everything you'd want?

On the blink team we're mainly interested in lower level primitives (such
as the beforescore event
<https://docs.google.com/a/chromium.org/document/d/1oEVWIVdMZ2OlVZMvcZZ3IgaT6RAUNSKAzpzb9AlVeLw/edit#>
we just proposed here) that enable a much richer set of customization.  I'd
personally still support standardizing something like scroll-chaining if we
also had the low-level primitives that "explain
<http://extensiblewebmanifesto.org>" it.

Rick

On Sat, Sep 20, 2014 at 9:05 PM, Eric Andrew Lewis <
eric.andrew.lewis@gmail.com> wrote:

> 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
>