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


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