W3C home > Mailing lists > Public > www-style@w3.org > June 2014

:scroll() A proposal for a new Css pseudoclass

From: Kseso? <kseso9@gmail.com>
Date: Fri, 13 Jun 2014 20:32:58 +0200
Message-ID: <CAAQ7Nj4aXHJZTvP6Q7daTUNnMsJ4gFbWZRC-qozAmUCAmAfyrQ@mail.gmail.com>
To: www-style@w3.org
:scroll() pseudoclass for styles on funtion of user interaction with the
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

  &lt;article class='one'>
  &lt;article class='two'>

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:43 UTC