jQuery Custom Scrollbar (Original)
Last updated: 2021-03-11 09:16:14
Changelog:The plugin supports browsers IE9 and above. The previous demo.html demonstration file did not work because ES6 template literals were used in demo.html. In addition, fixed a bug where wheel events conflicted when multiple scrollbars existed simultaneously; fixed a bug where keyboard arrow key events conflicted when multiple scrollbars existed simultaneously. Currently, only one keyboard arrow key event is allowed. If multiple events exist simultaneously, only the first one will take effect. Finally, updated the usage instructions;
Usage:
1. Required files:
js--jquery.min.js,jquery.inputProgressBar.min.js
css--jquery.smilebar.min.css
img--smilebarImg
2. Include:
1 2 3 | <link rel="stylesheet" href="css/jquery.smilebar.min.css" /><script src="js/jquery.min.js"></script><script src="js/jquery.smilebar.min.js"></script> |
3. Usage:
1 2 3 | $("#Ele").smilebar({ handBle:true}); |
4. Notes:
1) "#Ele": Use ID selectors whenever possible to ensure uniqueness
2) The element must have a fixed width and height;
3) If the element's width or height changes dynamically, call the update() method whenever the change occurs;
4) If you need to add content dynamically, add it inside $("Ele>smilerbar-content");
5. Configuration:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* Default configuration */var config = { type: "xy", // Type // x: horizontal, y: vertical, anything other than "x" or "y": horizontal and vertical size: "12px", // Scrollbar size color: "#252a35", // Scrollbar color silderSize: "60%", // Slider size Range [20%-100%] silderColor: "#404550", // Slider color clickBln: true, // Click toggle // Other activation method: add the attribute data-click="true" to the instance keyBln: true, // Keyboard toggle // Other activation method: add the attribute data-key="true" to the instance keySpeed: 1, // Keyboard movement speed Range (0-100] wheelBln: true, // Mouse wheel toggle // Other activation method: add the attribute data-wheel="true" to the instance wheelSpeed: 1, // Keyboard movement speed Range (0-100] handBln: false, // Hand-drag feature toggle // Alternative activation method: add the field: data-hand="true" to the instance handSpeed: 30, // Hand-drag speed Range (0-100] initPosition: { // Initial scroll position x: 0, // X-axis Three formats: 1: number (px unit) 2: string ("%" unit) y: 0 // Y-axis 3: string ("first": top "center": middle "last": bottom) },}; |
Updated: 2021-03-10 00:18:25
Usage
Required files: css--jquery.smilebar.min.css js--jquery.min.js, jquery.smilebar.min.js img--smilebarImg
Import the hand-drag image
1 | <link rel="stylesheet" href="css/jquery.smilebar.min.css" /> |
Usage
1 2 3 4 | $.("Ele").smilebar({ type: "y", handBln: true}); |
Ele-- > Selector of the element that needs a scrollbar
Note:
The element's width and height must be fixed;
When the element's width and height change dynamically, call the update() method whenever they change;
To dynamically add content, add it inside $("Ele>smilerbar-content");
Configuration config:
type: Type * Default "xy" //x: horizontal y: vertical Any value other than "x" or "y": horizontal and vertical *
size: Scrollbar size * Default 12px *
color: Scrollbar color * Default #252a35 *
silderSize: Slider size * Default 60% Range [20%-100%] *
silderColor: Slider color * Default #404550 *
clickBln: Click toggle * Default true // Alternative activation method: add the field: data-click="true" to the instance *
keyBln: Keyboard toggle * Default true // Alternative activation method: add the field: data-key="true" to the instance *
keySpeed: Keyboard movement speed * Default 1 Range [0-100] *
wheelBln: Mouse wheel toggle * Default true // Alternative activation method: add the field: data-wheel="true" to the instance *
wheelSpeed: Keyboard movement speed * Default 1 Range [0-100] *
handBln: Hand-drag feature toggle * Default false // Alternative activation method: add the field: data-hand="true" to the instance *
handSpeed: Hand-drag speed * Default 30 Range [0-100] *
initPosition: Initial scroll position * Default {x:0,y:0} //{Three formats: 1: number (px unit) 2: string ("%" unit) 3: string ("first": top "center": middle "last": bottom)