Re: [mediaqueries] Proposal for scroll-position Media Query

Interesting idea, I agree the scenarios you're trying to tackle are
important!

Most browsers implement scrolling on a separate thread so it happens
asynchronously from media query processing and JavaScript.  To be useful
would you require that the media query get processed in the same frame as
the scroll update that triggered it?  If not then this is probably no more
powerful than running JS on scroll events, right?

I agree that scrolling of elements is a problem here.  Personally I think
we need a more powerful primitive (like our recently proposed
<http://lists.w3.org/Archives/Public/www-style/2014Sep/0297.html> '
beforescroll
<https://docs.google.com/a/chromium.org/document/d/1oEVWIVdMZ2OlVZMvcZZ3IgaT6RAUNSKAzpzb9AlVeLw/edit#>'),
but I could imagine something like this being built logically on top of
that and handling a lot of the common (document scrolling) use cases more
naturally for the developer.

Alternately since scrolling isn't strictly a page-level thing, maybe CSS
classes are more appropriate than media queries here.  Eg. what if we had
some API for saying "apply class c to element e whenever it's scrolling
container is before/after position x'.  That would be trivial to polyfill
in JS on top of a lower level primitive like beforescroll, while also
generalizing nicely to all types of scrolling - not just document.

Rick

On Thu, Sep 25, 2014 at 8:37 AM, Bennett Feely <bfeelyweb@gmail.com> wrote:

> More and more websites feature stylistic changes that are triggered via
> javascript once or after the user reaches a certain point scrolling down
> the page.
>
> I think a CSS Media Query for "scroll-position" would be incredibly
> beneficial for the web and could tackle a large range of issues relevant to
> the current state of web design without introducing a stockpile of new and
> fragmented CSS properties.
>
> This is how I think it could work:
>
>    - Three new CSS Media Queries, "scroll-position-x",
>    "scroll-position-y", and a shorthand "scroll-position" queries.
>    - These media queries ideally accept pixel values (scroll-position-y >
>    500px), percentage values (scroll-position-x >= 50%), em, rem, viewport
>    units, etc., but also textual values that are relative to the document
>    (scroll-position-y: bottom).
>    - I think it would be very useful if scroll-position Media Queries
>    could also be triggered when a user scrolls to an element in the query.
>    This should include a point in relation to the element which the media
>    query targets (e.g. if I want the query to be applied at a point shortly
>    before scrolling to the element or applied when reaching the center of the
>    element). This might be achieved with something like (scroll-position-y >=
>    [element, [trigger-reference-y]]).
>
> A whole lot of tricky problems that are currently being dealt with in
> websites today such as Sticky positioning, scrolling shadows, animations
> triggered at a certain scroll point, etc. could be solved with a Media
> Query for scroll-position.
>
> One major problem I can think of is how it could be possible to have the
> media query target the scroll-position of a specified element in addition
> to the document's scroll position. I am open to ideas on how that could be
> included in this proposal.
>
> - Bennett Feely
>   http://bennettfeely.com
>
>