Do you want to create a Custom Scrollbar in Html with prety slim design? By default HTML user can be easily added Custom scrollbar with CSS into any website, but due to browser Scrollbar is not prety and it’s not good for website look. With the help of SlimScroll Js you can custom your Scrollbars easily with brand colors and make them look prety with your web page design. In this article, we will show you how to Create Your Own Custom Scrollbar In HTML Bootstap Without Overflow CSS Property.

Create Your Own Custom Scrollbar In HTML Bootstap Without CSS Overflow Property

Step By Step Guide: Create Your Own Custom Scrollbar In Bootstrap Without CSS Overflow Property

First thing you need to do is add javascript library in header section.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Upon add javascript library, you need to add slimscroll javascript function to head section.

<script type="text/javascript">
$(function(){
$('#testDiv').slimscroll({
height: '520',
alwaysVisible: true,
color:'#f39c12 '
});
});
</script>

On the slimscroll javascript function, first thing you need to configure is the slimscroll properties like height, width,color etc. Then add height for your scrollbar for example- 520, the default width is you website design width. If you want to add width of scroll, just add width attribute in slimscroll function. You can also adjust the color of the scrollbar.

<div id="testDiv">
<p>Create Your Own Custom Scrollbar In HTML Bootstap Without CSS Overflow Property.</p>
</div>

Next step, add reference to the slimScroll itself. Just need to add slimscroll library in your website footer.

<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>

For download: Download SlimScroll javascript

Now you will see your custom scroll bar in website section where you want. Feel free to customize the look of your scroll bar until you get the desired result.

custom scroll in html

Basic configuration

$(selector).slimScroll();

$(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
});

width – Width define in pixels of the display scroll area. Default Width of scroll none.

height – Supports auto to set the height to same as parent. Default height of scroll 250px.

size – Width of the scrollbar(in pixels).

position – Sets the position of the scrollbar(left or right). Default position of scroll is right.

color – Color code should be in hex. Default color is #000000.

alwaysVisible – If you want to hide scrollbar use this property. Default: false

Also Visit: How To Create Html Select Option List In Html Page

We hope this article helped you to Create Your Own Custom Scrollbar In HTML Bootstap Without CSS Overflow Property.

LEAVE A REPLY