Using an Element’s Scroll Position

Currently CSS Doesn't have any way to apply styles based on the document's scroll position or the scroll position of individual elements on the page. The closest CSS comes is the position: sticky spec, but in this case we're only able to harness the scroll event in the most basic way.

JavaScript has a much more useful knowledge of the scroll dimensions of an element - it's current scroll position as well as it's current scroll size, which when paired with knowledge of its rendered width and height provide a powerful context for applying styles that CSS is currently ignorant of.

Parts Required

JS Tests

Min-Scroll Y:

test < this.scrollTop

Max-Scroll Y:

this.scrollTop < test

Min-Scroll X:

test < this.scrollLeft

Max-Scroll X:

this.scrollLeft < test

Plugins Capable

Syntax Examples

EQCSS

@element .min-scroll-x and (min-scroll-x: 50%) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .max-scroll-x and (max-scroll-x: 50%) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .min-scroll-y and (min-scroll-y: 50%) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .max-scroll-y and (max-scroll-y: 50%) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

Selectory

.min-scroll-x[test="this.scrollLeft > 100"] {
  background: lime;
}

.max-scroll-x[test="this.scrollLeft < 100"] {
  background: lime;
}

.min-scroll-y[test="this.scrollTop > 50"] {
  background: lime;
}

.max-scroll-y[test="this.scrollTop < 50"] {
  background: lime;
}

Demos

Further Reading