In this tutorial we will show you the solution of custom scrollbar CSS for div, as we know css used to style html elements, here we used internal style method to create custom scroll bar that means default scroll bar design will modified by us.
Then we need to create scroll bar for <div> element within div we defined long paragraph to make scroll.
We can make either vertical or horizontal side scroll here we defined vertical scroll with custom styles.
Step By Step Guide On Custom Scrollbar CSS For DIV :-
In our program we just copied some text from document then pasted multiple times to make long size paragraph using <p> tag.
Then we sets height of the paragraph to maximum size ‘100px’ because we need to make overflow on vertical side then only vertical scroll bar will appear at right hand side of webpage after that we can use css to style scroll bar.
<!DOCTYPE html>
<html>
<head>
<title>SCROLL DIV</title>
<style>
.scroll{
overflow-y: scroll;
height: 100px;
margin: 10px 5px;
padding: 5px;
text-align: justify;
}
.scroll::-webkit-scrollbar{
width: 5px;
}
.scroll::-webkit-scrollbar-track{
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
}
.scroll::-webkit-scrollbar-thumb{
box-shadow: inset 0 0 6px green;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="scroll">
<p>Our products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignment</p>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- In <style> tag we defined styles for div element there we sets heigh to ‘100px’ because we needs make vertical scroll bar will appear at right hand side. Then other styles defined for style <div> and <p> element.
- Using ‘margin’ to ‘10px for top and bottom side’ and ‘5px for left and right side’, using ‘padding:5px’ we sets gap between div and paragraph and ‘text-align: justify;’ property used to align text equally on both sides.
- For style default scroll bar we need to use ‘pseudo’ class so we defined ‘.scroll::-webkit-scrollbar’ to fix size of scroll bar width to ‘5px’, ‘.scroll::-webkit-scrollbar-track’ used to style scroll bar rectangular track we sets shadow inside of track ‘box-shadow: inset 0 0 6px rgba(0,0,0,0.3);’ and ‘border-radius: 5px;’ used to make scroll bar edge as curve shape.
- Then we styles scroll bar inside moving item by ‘.scroll::-webkit-scrollbar-thumb’. Here we makes shadow inside with color ‘green’ and created curve shape at edge to ‘5px’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined one <div> element with ‘scroll’ class attribute within div we defined wide paragraph using ‘<p>’ tag.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to create custom scroll bar using css.
When we execute this program on browser there we can see paragraph will display with vertical scroll bar by we defined long size paragraph but we puts into small height of div so vertical scroll bar is appeared at most right side of page.
After that we modified default scroll bar design to make customized scroll bar so it will looks differently and we can make custom horizontal scroll bar also.
I hope this tutorial on custom scrollbar CSS for div helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
