Get started with overlayscrollbars CDN
MIT licensed
The Overlayscrollbars library enhances the scrolling experience by adding custom scrollbars to elements.
Tags:- overlayscrollbars
- custom
- scrollbar
- scrollbars
- scroll
- frontend
Stable version
Copied!
How to start using overlayscrollbars CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with overlayscrollbars CDN - cdnhub.io</title>
<style>
#container {
height: 800px;
width: 100%;
overflow: auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdn.cdnhub.io/overlayscrollbars/2.6.1/browser/overlayscrollbars.browser.es6.min.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
init() {
this.scrollbar = new OverlayScrollbars('#container');
},
}));
});
</script>
</head>
<body x-data="{ init: app => app.init() }" x-init="init()">
<div id="container">
<button>Scroll to bottom</button>
<ul>
<li v-for="i in 100">Item {{ i }}</li>
</ul>
</div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
All versions
1.1.0
1.10.0
1.10.1
1.10.2
1.10.3
1.11.0
1.12.0
1.13.0
1.13.1
1.13.2
1.13.3
1.2.0
1.2.1
1.2.2
1.2.3
1.3.0
1.4.0
1.4.1
1.4.2
1.4.3
1.4.4
1.4.5
1.5.0
1.5.1
1.5.2
1.5.3
1.6.0
1.6.1
1.6.2
1.6.3
1.7.0
1.7.1
1.7.2
1.7.3
1.8.0
1.9.0
1.9.1
2.0.0
2.0.0-beta.0
2.0.0-beta.1
2.0.0-beta.2
2.0.0-beta.3
2.0.1
2.0.2
2.0.3
2.1.0
2.1.1
*** 2.10.0
2.2.0
2.2.1
2.3.0
2.3.1
2.3.2
2.4.0
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
2.4.7
2.5.0
2.6.0
2.6.1
2.7.0
2.7.1
2.7.2
2.7.3
2.8.0
2.8.1
2.8.2
2.8.3
2.9.0
2.9.1
2.9.2