1<!DOCTYPE html>
2<html lang="en" data-overlayscrollbars-initialize>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>test</title>
7<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📃</text></svg>" />
8<meta name="robots" content="noindex, nofollow">
9
10<!-- kingsora.github.io/OverlayScrollbars -->
11<!-- github.com/KingSora/OverlayScrollbars -->
12<link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.7.3/styles/overlayscrollbars.css" rel="stylesheet" />
13<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.7.3/browser/overlayscrollbars.browser.es6.min.js"></script>
14
15<style>
16main {
17 margin:10vmin auto;
18 width:clamp(25vw,540px,85vw);
19}
20
21main > p:first-child { margin-top:0 }
22main > p:last-child { margin-bottom:0 }
23</style>
24
25<script>
26document.addEventListener("DOMContentLoaded", () => {
27 let {
28 OverlayScrollbars,
29 ScrollbarsHidingPlugin,
30 SizeObserverPlugin,
31 ClickScrollPlugin
32 } = OverlayScrollbarsGlobal;
33
34 OverlayScrollbars.plugin(ClickScrollPlugin)
35
36 let scrollDiv = document.querySelector("body")
37 let initScrollbar = OverlayScrollbars(scrollDiv, {
38 scrollbars: {
39 dragScroll: true,
40 clickScroll: true
41 },
42 autoHide: "never"
43 })
44})
45</script>
46
47</head>
48
49<body>
50
51<main>
52
53 <h3><a href="https://github.com/KingSora/OverlayScrollbars">OverlayScrollbars</a>' usage/testing</h3>
54
55 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dignissim ante dolor cursus sapien ex enim fermentum proin eget. Donec lobortis vulputate metus conubia mattis vehicula dui magna inceptos dolor arcu at aenean ex. Cubilia consequat sed neque ultrices platea sapien elit per ultrices suspendisse eleifend dolor cras. Ipsum ullamcorper lectus nibh condimentum habitant dictumst. Orci tristique odio vitae vitae sapien etiam tellus quis feugiat amet ullamcorper.</p>
56 <p>Diam diam varius per interdum nam pharetra. Diam massa dui conubia mattis habitasse diam pellentesque quisque enim suscipit volutpat eget. Convallis dui netus amet curae risus nulla purus scelerisque et quis ipsum vulputate. Phasellus arcu sodales varius morbi imperdiet proin habitant proin dictumst primis imperdiet luctus sit turpis.</p>
57 <p>Purus tempus vivamus sit orci morbi odio scelerisque suscipit posuere convallis sagittis quam curabitur sollicitudin. Nostra varius ipsum euismod nostra aenean condimentum mattis elementum blandit ad. Condimentum hendrerit etiam congue eget et dignissim nostra inceptos primis. Mattis eget iaculis bibendum tellus posuere molestie condimentum orci dictum urna.</p>
58 <p>Risus mattis netus nunc quam vehicula leo cursus vivamus eros. Ligula tempor a convallis egestas auctor sem. Laoreet suscipit cursus pellentesque scelerisque neque luctus integer tortor torquent habitant mollis auctor pulvinar diam. Arcu phasellus erat maecenas velit viverra senectus sit feugiat et nibh enim ipsum mollis netus.</p>
59 <p>Nostra vehicula suscipit auctor odio ornare non velit elementum vulputate. A facilisis neque bibendum arcu feugiat eget dapibus ullamcorper sollicitudin blandit suscipit dignissim sociosqu fames ac. Odio sapien dolor aliquam sit urna cras pellentesque malesuada sagittis ligula condimentum lorem. Nullam faucibus mattis fringilla fames diam pellentesque non curabitur netus sagittis cursus id vehicula ullamcorper.</p>
60 <p>Et ante rutrum sagittis ullamcorper pellentesque lorem leo gravida turpis sagittis. Maximus magna cursus quam a curae leo semper nostra condimentum lacinia rhoncus lacinia. Sollicitudin massa in at bibendum neque ligula quisque arcu facilisis fusce nunc suspendisse lorem id. Eros integer tempor maecenas quis orci platea sit phasellus augue pretium donec hendrerit sem non conubia. Nunc aptent dolor aliquam duis fringilla a congue morbi.</p>
61 <p>Dapibus interdum id semper elementum consectetur convallis turpis. Feugiat pulvinar venenatis commodo vitae sagittis ex laoreet vivamus metus lacinia proin cras fringilla. Sed nulla sollicitudin varius dui class curabitur. Facilisis pretium hendrerit hendrerit sagittis platea dui velit suspendisse.</p>
62 <p>Ornare diam donec conubia habitant maecenas integer vivamus maximus primis conubia. Amet aenean integer auctor morbi est per ullamcorper sed quisque aliquet netus aenean. Bibendum amet cras senectus turpis suscipit cubilia.</p>
63 <p>Tempus quisque nisl nunc vulputate porttitor platea dolor nullam elementum. Habitasse eget donec molestie non ligula nullam torquent ante porta arcu mattis cras imperdiet. Lacinia feugiat nunc cursus dolor convallis lacus malesuada amet lectus.</p>
64 <p>Etiam amet himenaeos auctor senectus sit est congue conubia. Elementum iaculis luctus aliquam id nulla pretium sollicitudin ipsum neque.</p>
65 <p>Quam ultrices enim sem quam ultrices integer sem tellus tortor molestie molestie praesent commodo rutrum. Varius nisl phasellus dictumst bibendum justo magna blandit quisque in facilisis eros hac. Sit tincidunt lacinia vehicula potenti cursus dictumst diam nostra quam duis mi dapibus magna ornare. Eu nunc aliquet faucibus curae habitant a vitae rutrum viverra convallis cubilia libero. Platea vivamus sem tempor nisl velit lorem porta vivamus.</p>
66 <p>Rutrum pharetra urna vel ut semper imperdiet mi ligula per. Consectetur maecenas ipsum cursus porta sapien faucibus sapien metus aenean. Mollis condimentum egestas ultricies elementum fusce risus congue vel hendrerit ac inceptos gravida lorem blandit tortor. Odio nullam taciti quis accumsan quisque finibus potenti lectus leo vel. Dui cubilia ullamcorper libero scelerisque sagittis tempus pretium felis lacinia consectetur ullamcorper vestibulum ullamcorper quisque.</p>
67 <p>Accumsan mauris in non rhoncus fringilla accumsan morbi ante gravida. Dictumst himenaeos placerat mattis habitant tortor dui neque est volutpat integer sociosqu. Semper cursus massa ipsum fringilla class vel.</p>
68 <p>Egestas interdum placerat conubia porta faucibus etiam cras gravida donec habitasse. Lacinia leo eleifend quam leo sem cras consequat tempus faucibus condimentum pellentesque leo justo purus. Fames accumsan aliquet dignissim leo et imperdiet vestibulum in ultricies. Faucibus volutpat vivamus venenatis pretium accumsan lobortis ut nisi volutpat pretium tortor conubia purus. Congue nunc felis pharetra suspendisse nullam ultricies cubilia arcu ante.</p>
69
70</main>
71
72</body>
73</html>
