:scroll() A proposal for a new Css pseudoclass

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

Let me give an example.

A psuedo html

<body>
  <article class='one'>
    <header/>
    <img.../>
    <p/>
  </article>
  <article class='two'>
    <header/>
    <img.../>
    <p/>
  </article>
</body>


The initial Css (it applies when the page is loaded)

article {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.two header {
  transform: translatex(-100vw);
}
.two img {
  position: absolute;
  top: -100%;
}


When the page is loaded we only see the article '.one'
Wen I´ll go scroll down, the 'header' and 'img' contain on article '.two'
aren´t accessible.

Here cames the pseudoclass :scroll()

html:scroll(top: 50vh) .two header {
   transform: translatex(0);
}
html:scroll(top: 55vh) .two img {
   animation: my_animation 1s;
}

It means than when the scroll has traveled (and it has arrived to) the
value given in the argument of the pseudo-class in the latter rules are
applied: the 'header' and 'img' contain on article '.two' are displayed
inside the article.


Valid values for :scroll() argument:
The first part of the argument:
one of the two positioned values: top | left
'Top' only for scroll-Y and 'left'  only for scroll-X.
The second part of the argument:
a positive number with any valid unit lengths, absolute or relative, as px,
rem, %, viewport percent...
Negative values aren´t allowed.

Double value in the pseudo-class :scroll()
.element:scroll(top: 100px, left: 20%) {}
A double comma separate value.
The selector matches element when any two values is true.

Nested two pseudo-class
.element:scroll(top: 100px):scroll(left: 20%) {}
The selector matches element when the two values are true.

Ranges in the value of the argument:
Just that happens in another pseudo-class (as  "Media Feature Types:
“range”" -point 2.4- in "Media Queries Level 4" document) the pseudo-class
:scroll() could support value ranges:
:scroll(100px < top < 80%) {}

calc() onto argument of :scroll()
It´s allowed
.parent:scroll(top: calc(100% - 20px)) > .child {}

Value of argument bigger than the length of the box
The rule will not be applied
i.e.: If the selector is .box:scroll(left: 500px) and the width of '.box'
is < 500 nothing will happen. The rule will be ignored.

Received on Friday, 13 June 2014 18:33:26 UTC