Disable Horizontal Scrolling CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Pragati
In this article we will show you the solution of disable horizontal scrolling CSS, we will disable horizontal scrolling using CSS. Here we are going to use the pseudo-element property (::-webkit-scrollbar). Let us know about the property first.
::-webkit-scrollbar: to hide the horizontal scrollbar we have to set the display property to none.
Now this method is applicable for Chrome, opera, edge, safari etc. browsers. We will see an example below.
Step By Step Guide On Disable Horizontal Scrolling CSS :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> disable horizontal scrolling CSS </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: black;
overflow: hidden;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
div{
height: 150px;
width: 150px;
background-color: antiquewhite;
color: black;
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> disable horizontal scrolling css </h3>
</center>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate fugit suscipit, error aut asperiores tenetur maxime velit, natus animi, sunt nobis non cumque id eos ipsam eligendi iure. Incidunt nostrum, rerum porro quibusdam labore impedit assumenda hic sunt recusandae fugit beatae qui delectus facere. Ipsam facere illum ex aut saepe? Libero assumenda distinctio alias optio corporis quia. Nihil ut mollitia quasi velit. Deleniti, magni impedit! Odio tempore eveniet rerum repellat enim perspiciatis eos. Nisi quisquam ab delectus facere obcaecati cumque perspiciatis? Amet, aperiam molestiae necessitatibus assumenda eveniet est saepe magni dolor, voluptas distinctio error, excepturi deleniti voluptatum enim iure nulla.</p>
</div>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Creating a <div> and write a paragraph using <p> within it.
- In the <style> tag setting the height and width of the div element. And also setting background-colour and colour to it. Set the horizontal overflow-y to scroll.
- Now to disable the horizontal scrollbar set the pseudo element property div::webkit-scrollbar to display none.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to disable horizontal scrolling using CSS.
I hope this article on disable horizontal scrolling css helps you and the steps and mentioned above are easy to follow and implement.
About Pragati
