Beautiful Virtual Scrollbar

Add-ons

2026-07-21 13:01 5 次浏览 • 0 次下载 51.5KB

Plugin Description: A highly customizable virtual scrollbar plugin that is very convenient to use.

Basic configuration

1	`$(selector).slimScroll();`

Example of additional settings

$(function() {
    $(".slimscroll").slimScroll({
        width: 'auto', // Width of the scrollable area
        height: '100%', // Height of the scrollable area
        size: '10px', // Component width
        color: '#000', // Scrollbar color
        position: 'right', // Component position: left/right
        distance: '0px', // Distance between the component and the sidebar
        start: 'top', // Default scroll position: top/bottom
        opacity: .4, // Scrollbar opacity
        alwaysVisible: true, // Whether to always display the component
        disableFadeOut: false, // Whether to display the component when the mouse hovers over the scrollable area and hide it when the mouse leaves
        railVisible: true, // Whether to display the track
        railColor: '#333', // Track color
        railOpacity: .2, // Track opacity
        railDraggable: true, // Whether the scrollbar is draggable
        railClass: 'slimScrollRail', // Track div class name 
        barClass: 'slimScrollBar', // Scrollbar div class name
        wrapperClass: 'slimScrollDiv', // Wrapper div class name
        allowPageScroll: true, // Whether to scroll the window when the mouse wheel reaches the top/bottom
        wheelStep: 20, // Mouse wheel scroll amount
        touchScrollStep: 200, // Scroll amount when the user uses touch gestures
        borderRadius: '7px', // Scrollbar border radius
        railBorderRadius: '7px' // Track border radius
    });
});

Events

slimScroll publishes slimscroll event when scrollbar reaches top or bottom of the parent container. You can use jQuery bind method to subscribe to this event:

 $(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
 });