@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
64 lines (59 loc) • 1.78 kB
HTML
<html>
<head>
<title>Demo for pat-scroll</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
<meta name="viewport" content="width=device-width" />
<style>
body {
height: 200vh;
}
.container {
/**
* trick to espatblish a relative containing block
* for position:fixed
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
*/
transform: rotate(0);
}
body .pat-scroll-box {
overflow-y: auto;
border: 1px solid black;
height: 5em;
margin: 4em 0;
}
.pat-scroll-box--inner {
height: 20em;
}
.scroll-up::before,
.scroll-down::before,
.scroll-position-top::before,
.scroll-position-bottom::before {
position: fixed;
display: block;
font-size: 2em;
}
.scroll-up::before {
content: "↑";
}
.scroll-down::before {
content: "↓";
}
.scroll-position-top::before {
content: "↥";
}
.scroll-position-bottom::before {
content: "↧";
}
</style>
</head>
<body class="pat-scroll-box">
<div class="container">
<div class="pat-scroll-box">
<div class="pat-scroll-box--inner">hello.</div>
</div>
</div>
</body>
</html>