Coders Packet

Custom Scrollbar. Format: JavaScript + CSS, Dependency required: JQuery

By Aishwarya Agrawal

There is a lack of compatibility leading to difficulty in customizing scrollbars. This is a custom JAVASCRIPT-based scrollbar to replace the browser scrollbars.  It requires jquery to be added.

Packet Name:- Customisable ScrollBar

Current Problem: Lack of compatibility leading to difficulty in customizing scrollbars for user interfaces, especially for browsers such as Mozilla Firefox and Microsoft Edge.

Proposed Solution: A custom javascript and jquery based scrollbar to replace the standard browser scrollbars.
It would allow for customization and even change in features like speedy scrolling and scrolling with different keys.

Functions of the packet: It has 4 basic functions
1. Responding and moving according to mouse wheel
2. Performing hold and drag function of scrollbar thumb
3. Click at a point on the scrollbar to skip to a corresponding point on the page
4. Respond to keyboard key-presses

Contents of the zip: This is a code packet containing four files
1. scrollscript.js : Containing the JavaScript.
2. scrollstyle.css : Containing the CSS.
3. index.HTML : A demo of what a scrollbar would look like without further customization.

How to Use: It involves 3 steps (Consult the README for more details on deployment)
1. Unzip, add two files (scrollscript.js, scrollstyle.css) to the same folder as the site HTML

2. Add jquery and jquery-ui to the document and then add scrollscript.js all in script tags (demo in index.html provided)

3. Make any changes required in the scrollstyle.css file to customize it to match the page formatting.

Made by: Aishwarya Agrawal

Download Complete Code


No comments yet