How to disable scroll with CSS?

Many times you want to improve the UX of your website and hence keep all the contents on a single screen hence you don’t need a scrollbar. In this tutorial, we will learn how to do exactly disable scroll with CSS on a website.

So let’s jump right in!

Pre-requisites

So before we try to remove the scrollbar need to learn about an important CSS property called the overflow property.

Overflow CSS Property

CSS overflow property helps us control what happens when a certain element’s content is bigger compared to the area in which you want to put it.

When this happens, it causes the content to overflow into another pane either vertically (y-axis) or horizontally (x-axis)

Now let’s take a look at all the values the overflow property can take and how each of them work

• visible
• hidden
• scroll
• auto

overflow: visible

When you don’t specify anything to the overflow property this is the default value which takes and you can see your content overflow to another area let’s look at an example of how:

HTML:

<h2>Overflow: visible</h2>
    <div id="visible" class="box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut!...</p>
    </div>
Code language: HTML, XML (xml)

CSS:

.box{
    height: 200px;
    width: 400px;
    border: 1px solid red;
}
#visible{
    overflow: visible;
}
Code language: CSS (css)

How it looks:

overflow: hidden

If you use the hidden value, the overflowing part of the content will be cut off. It will be invisible.

We don’t have to worry about the space taken up by the overflow part. Once the content has been truncated, it is no longer in the area where it had overflowed.

Let’s look at an example:

HTML:

<h2>Overflow: hidden</h2>
    <div id="hidden" class="box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut!...</p>
    </div>
Code language: HTML, XML (xml)

CSS:

.box{
    height: 200px;
    width: 400px;
    border: 1px solid red;
}
#hidden{
    overflow: hidden;
}
Code language: CSS (css)

How it looks:

overflow: scroll

Just like the hidden value the scroll value also cuts the content out. But it provides a scrollbar so we can scroll and see the cropped part of the content.

Let’s look at an example of how:

HTML:

<h2>Overflow: scroll</h2>
    <div id="scroll" class="box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut!...</p>
    </div>
Code language: HTML, XML (xml)

CSS:

.box{
    height: 200px;
    width: 400px;
    border: 1px solid red;
}
#scroll{
    overflow: scroll;
}
Code language: CSS (css)

How it looks:

overflow: auto

When you use the auto value for the overflow property, the scroll bar is added only in the direction in which the overflow happens.

If no overflow happens in any direction, no scrollbar will be added.

Let’s look at an example:

HTML

<h2>Overflow: auto</h2>
    <div id="auto" class="box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut!...</p>
    </div>
Code language: HTML, XML (xml)

CSS:

.box{
    height: 200px;
    width: 400px;
    border: 1px solid red;
}
#auto{
    overflow: auto;
}
Code language: CSS (css)

How it looks:

overflow-x & overflow-y

Now if you want to check for overflow in a specific direction that is the x-axis and y-axis you can use the overflow-x and overflow-y properties.

• overflow-y: CSS property to specify what happens when content overflows vertically i.e from top to bottom
• overflow-x: CSS property to specify what happens when content overflows horizontally i.e from left to right.

The same four values of visible scroll and auto can be used with these properties as well.

Hide Scrollbars

To completely hide the scrollbars from your page, as we saw earlier we can use the overflow: hidden property.

It hides both the vertical and horizontal scroll bars.

Here’s how you can do it:

body {
    overflow: hidden;
}
Code language: CSS (css)

If you want to hide only the vertical scrollbars or the horizontal scrollbars you can use the overflow-y and overflow-x properties as required.

CSS:

body {
    overflow-x: hidden; /*hides horizontal scrollbar*/
    overflow-y: hidden; /*hides vertical scrollbar*/
}
Code language: CSS (css)

Bonus: Hide but still Scroll

Now here’s a bonus tip if you want to just hide the scroll bars but not completely get rid of the functionality that the scrollbars provide you can use the following code on your website:

HTML:

<h2>Bonus: Scroll but hide Scrollbars</h2>
    <div class="bonusBox">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut!
...</p>
    </div>
Code language: HTML, XML (xml)

CSS:

/* Hide scrollbar for IE, Edge and Firefox */
.bonusBox {
    height: 200px;
    width: 400px;
    border: 1px solid green;
    overflow-y: scroll;

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.bonusBox::-webkit-scrollbar {
  display: none;
}
Code language: CSS (css)

Conclusion

In this tutorial, we learn how we can control the overflow of content on a website, and how we can disable scroll with CSS we also got a bonus tip on implementing the scroll functionality but also hiding the scroll bars.

We used codedamn playgrounds in this tutorial and how can try it out yourself by forking this playground.

I hope you liked reading this article! ?

You can read more on the codedamn blog

P.S: I have won many hackathons and worked on many projects. You can connect with me on LinkedIn to know about hackathon ideas, internship experiences, and Development tips.