kamlekar / Slim Scroll
Licence: mit
HTML element scroll bar as replacement for default browser's scroll-bar. Design as you want using CSS.
Stars: ✭ 251
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Slim Scroll
Materialscrollbar
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.
Stars: ✭ 761 (+203.19%)
Mutual labels: scrollbar
Vue Gemini Scrollbar
Custom overlay-scrollbars with native scrolling mechanism for web applications基于原生滚动机制的自定义滚动条
Stars: ✭ 99 (-60.56%)
Mutual labels: scrollbar
Optiscroll
Custom scrollbars for modern webapps. Supercharge the native scroll!
Stars: ✭ 201 (-19.92%)
Mutual labels: scrollbar
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (+304.78%)
Mutual labels: scrollbar
Vue Scroll Progress Bar
Vue.js plugin for page scroll progress bar
Stars: ✭ 76 (-69.72%)
Mutual labels: scrollbar
Overlayscrollbars
A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
Stars: ✭ 2,054 (+718.33%)
Mutual labels: scrollbar
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (+129.48%)
Mutual labels: scrollbar
React Scroll Shadow
Pure CSS shadow to indicate more content in scrollable area
Stars: ✭ 229 (-8.76%)
Mutual labels: scrollbar
Toscrollbar
An interactive scroll bar for traversing comically massive scroll views.
Stars: ✭ 90 (-64.14%)
Mutual labels: scrollbar
Scroll Lock
🔨 Cross-browser JavaScript library to disable scrolling page
Stars: ✭ 199 (-20.72%)
Mutual labels: scrollbar
Vim Scrollstatus
A Vim plugin to display a scrollbar in the statusline
Stars: ✭ 46 (-81.67%)
Mutual labels: scrollbar
Firefox Overlay Scrollbar
A working prototype of custom styleable overlay scrollbars on Firefox 72+.
Stars: ✭ 74 (-70.52%)
Mutual labels: scrollbar
Scrollprogress
🛸 Light weight library to observe the viewport scroll position
Stars: ✭ 148 (-41.04%)
Mutual labels: scrollbar
Ember Perfect Scroll
Perfect scroll component as an Ember cli addon
Stars: ✭ 21 (-91.63%)
Mutual labels: scrollbar
Smooth Scrollbar
Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution.
Stars: ✭ 2,695 (+973.71%)
Mutual labels: scrollbar
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+158.96%)
Mutual labels: scrollbar
React Gemini Scrollbar
🌗 React component for custom overlay-scrollbars with native scrolling mechanism.
Stars: ✭ 127 (-49.4%)
Mutual labels: scrollbar
Vue2 Scrollbar
The Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2. https://bosnaufal.github.io/vue2-scrollbar
Stars: ✭ 233 (-7.17%)
Mutual labels: scrollbar
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-13.94%)
Mutual labels: scrollbar
Phaser Ui Tools
Functions for creating a UI in Phaser. Rows, columns, viewports, scrollbars, stuff like that.
Stars: ✭ 187 (-25.5%)
Mutual labels: scrollbar
Slim-scroll (JavaScript Scroll Library) ~ 4KB compressed
Slim scroll is a replacement of default scrollbar provided by browsers on Windows. This library lets you design the scroll-bar by using simple css properties. It is created using javascript and css.
Download | Github | Demo | CDNjs
Buy me a 🍺 or ☕️
Tested on: IE9+, Chrome and Firefox.
Main Features:
- Easier to color the custom scrollbar using CSS.
- Can animate easily (check below properties for support).
- Re-evaluates when the container is fluid, vertically.
How to use:
- To make it work, include
slimscroll.js
inhead
tag. - Apply height to the container in fixed units or percentage.
- Just design the scrollbar as you want by applying css classes as explained below.
- [In IE8] Apply high specificity to override normal styles given to the scroll bar.
and then:
Method 1 (with no added styles):
new slimScroll(Element); // 'Element' is Javascript DOM object
Method 2 (with added styles):
or to add your own defined css styles:
new slimScroll(Element, {
'wrapperClass': '',
'scrollBarClass': '',
'scrollBarContainerClass': '',
'scrollBarContainerSpecialClass': '',
'scrollBarMinHeight': '',
'scrollBarFixedHeight': '',
'keepFocus': true/false
});
Explanation of above properties:
- wrapperClass (type - "string") : Mention wrapper class here.
- scrollBarClass (type - "string") : Mention scroll bar class here.
- scrollBarContainerClass (type - "string") : Mention scroll bar container class here.
- scrollBarContainerSpecialClass (type - "string") : This property is used to mention a class which will be applied only when the user is scrolling the content. Could be helpful while applying animations to the scroll bar.
- scrollBarMinHeight (type - "Integer") : Used to mention minimum scroll bar height here (without pixel unit)
- scrollBarFixedHeight (type - "Integer") : Used to mention scroll bar fixed height (without pixel unit). This makes sure to show the scroll bar height fixed even when content inside the container is increased.
- keepFocus (type - "Boolean") : Used to focus the container.
To make this work on height resize:
var customScroll = new slimScroll();
window.onresize = customScroll.resetValues; // pure javascript example.
Note:
- Usage of the above mentioned properties is optional or as per need.
- Add higher specificity css to override the custom styles which are being applied by this library.
- Don't override the styles which are given highest specificity (
!important
) by this library (those styles are necessary to make this scroll library work).
How I got this thought:
I got this thought, when I found solution to hide the default scrollbar (using css) which was the requirement for a post on Stackoverflow.
The solution was simple but that is how I got this thought :).
Future implementations:
- Implement Horizontal Scrollbar.
If you find any issue(s), please file here.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].