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

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

The scroll distance can measure from any of the two points: the start or
end, because the scrollbar has only 1 dimension: is a line, no space or
plane.
For scroll-X the star and end points are on the left and right (it depends
of direction property. Star = left for LTR).
The scrollbar length does not depend on the contents of the box that
generates it, only the size of the box (width / height box).
The length of html scrollbar is 100vh or 100vw, whatever the length of the
page.

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

Is there some language problem with the name of the 4 positioned properties
(left, right, top, bottom)?
I believe that these four words are already accepted and recognized as referent
points in Css.

*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
<https://tabatkins.github.io/specs/css-toggle-states/#checked-problems>>,
where "overflow" becomes a selector-affecting property and :scroll() is a
property-affected selector.*

I see no problem. The rule with :scroll() on the selector will be applied
only when the scrollbar is present.
If it isn´t (either because the content is less than the size of the parent
box or because the property overflow prevents it) the rule will become onto
unused css (as a media query for min-width: 120000px /two zeros added by
error or a input:checked with attr disabled).


2014-06-17 1:07 GMT+02:00 Tab Atkins Jr. <jackalmage@gmail.com>:

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