W3C home > Mailing lists > Public > www-style@w3.org > September 2014

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

From: Rick Byers <rbyers@chromium.org>
Date: Tue, 23 Sep 2014 10:21:44 -0400
Message-ID: <CAFUtAY95UW-wP2khpN=T1eUyRPLL8VAq4-Y7N1e5WnhwJEE80Q@mail.gmail.com>
To: Eric Andrew Lewis <eric.andrew.lewis@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
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
>
Received on Tuesday, 23 September 2014 14:22:40 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:46 UTC