Re: :scroll() A proposal for a new Css pseudoclass

On Fri, Jun 13, 2014 at 11:32 AM, Kseso? <kseso9@gmail.com> wrote:
> :scroll() pseudoclass for styles on funtion of user interaction with the
> scroll
> Now  Css don´t define a way for aplied styles on funtion of scroll movement
> and / or its position.
>
> Some realizations, as parallax scroll, cann´t be made in pure Css.
>
> Why not a pseudoclass in order to apply Css rules based in the user
> interaction with the scrollbar?
[snip]
> html:scroll(top: 50vh) .two header {
>    transform: translatex(0);
> }
> html:scroll(top: 55vh) .two img {
>    animation: my_animation 1s;
> }

I think this idea should work, and would be popular.  There are a few
interesting issues with it:

1. You can only measure scroll distance from the start edges - top and
left in an English page.  The other edges depend on the size of the
stuff inside the element, and so it's trivial to get a circular
dependency where something pushes an edge further away only when the
edge is close.  You can't do that with the "origin" edges.

However, we cant' name them top/left, because they change based on
language.  We can probably just call them "block" and "inline", so
"html:scroll(block 50vh) .two header", etc.

2. There's still a bit of circular dependency possible, since whether
or not :scroll() works on an element depends on if the element is
scrollable at all.  You can set "overflow:visible" from a :scroll()
rule, which is problematic.  This one's a bit more direct and easier
to address, though - we could probably fix it in the way I outline at
<https://tabatkins.github.io/specs/css-toggle-states/#checked-problems>,
where "overflow" becomes a selector-affecting property and :scroll()
is a property-affected selector.

~TJ

Received on Monday, 16 June 2014 23:08:37 UTC