Horizontal and Vertical scroll bar with Bootstrap 4

5 years ago
Zaid Bin Khalid
15326 Views
9

Slimscroll is a very good and lightweight JQuery plugin. In this post, I am going to show you how you can install a Slimscroll JQuery Plugin into your project with both options. In the initial release, this plugin only supports the vertical scroll bar. But now it is available for both axes. To see both examples click here.

How to install Slimscroll

To install slim scroll with both axes options you need to include js library only. After that, you just need to initialize the script. The total size of this library is 8.62KB.

Into your <head> tag or just after a <body> tag add below script tag.

<script src="../jquery.slimscroll.min.js"></script>

Just after main library add below code with your own selector and options.

//This is initialization script
$(selector).slimScroll({
    width: '300px',
    height: '500px',
    size: '10px',
    position: 'left',
    color: '#ffcc00',
    alwaysVisible: true,
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    allowPageScroll: false,
    disableFadeOut: false
});

5 years ago
Zaid Bin Khalid
15326 Views
9

Prev Next

Related Linkes

Horizontal and Vertical scroll bar with Bootstrap 4