In this tutorial we will show you the solution of hide vertical scrollbar css, as we know css used to style html elements, here we used internal style method to hide vertical scroll bar.
Usually overflow occurs on either horizontal or vertical side by long size image or text.
There scroll bar will appeared by default so we need to hide scroll bar to avoid uneven proper alignment of page and we can hide both side of scroll bar easily using css.
Step By Step Guide On Hide Vertical Scrollbar CSS :-
In our program we defined one header using <h1> tag and below that we just copied some text then pasted multiple times to make paragraph using <p> tag.
Then we sets width of the paragraph to small size of ‘10rem’ because we need to make overflow on vertical side then only vertical scroll bar will appear at right hand side after that we can use ‘overflow-y’ style property to remove vertical scroll bar by value ‘hidden’.
<!DOCTYPE html>
<html>
<head>
<title>HIDE VERTICAL SCROLLBAR</title>
<style>
body{
width: 10rem;
height: 5000px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h1>SAMPLE PARAGRAPH</h1>
<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 consignment 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 consignment 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 consignment</p>
</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 body element there we sets width to ‘10rem’ because we needs to reduce width space to small size then only vertical scroll bar will appear.
- The ‘height’ property sets to ‘5000px’ because we don’t know about that paragraph size so we need to use maximum size.
- Finally using ‘overflow-y’ property value to ‘hidden’ hides the vertical scroll bar and also we can’t see remaining part of paragraph because it can’t scroll now.
- 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 heading and wide paragraph using respective ‘<h1>, <p>’ tags.
- 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 hide vertical scroll bar using css.
When we execute this program on browser there we can see heading and paragraph will display within small width then we can’t see some of paragraph also because we hides vertical scroll bar.
Not only vertical scroll bar we can hide horizontal scroll bar also by using ‘overflow-x:hidden’ property later we will see about that.
I hope this tutorial on hide vertical scrollbar css helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
