Skip to content

Instantly share code, notes, and snippets.

@victory-sokolov

victory-sokolov/scroll-indicator.html

Last active November 23, 2023 14:43
Show Gist options
  • Save victory-sokolov/6378b9b432bb0a9be4c3f29907818d42 to your computer and use it in GitHub Desktop.
Save victory-sokolov/6378b9b432bb0a9be4c3f29907818d42 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll indicator design
Raw
scroll-indicator.html
<!DOCTYPE html>
<html>
<head><head>
<body>
<header class="scroller"></header>
<main>
content must be longer than 100vh
</main>
body {
background: linear-gradient(to right top,
$scroller-color 50%,
$scroller-background 50%);
background-size: 100% calc(100% - 100vh + #{$scroller-height});
background-repeat: no-repeat;
}
body:before {
content:'';
position: fixed;
top: $scroller-height;
bottom: 0;
width: 100%;
z-index: -1;
background: $body-background;
}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment