How to disable scrolling in HTML? – Top 5 HTML scrolling attributes

  • Reading time:8 mins read

How to disable scrolling in HTML? – The short answer

If you don’t want to read the whole article and just want to hide the scroll bar, you can find the answer in the code snippet below. You can hide the scroll bar using the overflow:hidden statement:

<style>
  div {
    overflow: hidden;
    width: 300px;
    height: 100px;
  }
<style>

 

What’s this article about? – HTML text-overflow

In this article, we’ll talk about how we can display text that is longer than the character limit of the textbox in any given part of our website.

This can also happen with tables when you want to display more data, rows, or columns than what you can fit on the screen comfortably.

You can solve this problem by making the text or table scrollable using the text-overflow settings. By using these settings, you can scroll within the text boxes and tables without scrolling on the whole website.

 

How to disable scrolling in HTML?

 

HTML scroll box – the overflow property

If we want to display longer text with more information than what can be comfortably read in that section of the website, we can place scroll boxes on the page. In such cases, a scroll bar will appear on the right side, or the bottom of the box that will let people scroll the text horizontally or vertically. We can do this using the overflow CSS property.

Values of the overflow property

In our examples, we have text in <div> tags that can be selected using CSS selectors to format them: we can change their background color, size and overflow property.

Overflow: scroll

To create scrollable text, we have two options: the overflow can take two values: scroll or auto. The scroll value always displays the scroll bar—even if the text doesn’t flow over.

In the example below, you’ll see a scroll bar on the bottom and one on the side, but the one on the bottom is inactive because the text doesn’t flow over in that direction.

 

Overflow: auto

The overflow: auto statement displays the scroll bar only when the text is longer than the box’s limit of displayable characters. In this example, the scroll bar only appears on the side of the box, because you can only scroll vertically.

Overflow: hidden – How to hide the scroll bar? 

If the text is longer than the text box, but we don’t want it to scroll, we can hide the scroll bar with the overflow: hidden statement. 

How to disable scrolling in HTML

Overflow: visible (default setting)

The overflow: visible setting will display all text, even if it overflows from the text box. This is the default setting, so it will happen any time we don’t specify the overflow property’s value.

Scrollable HTML table

When creating tables, scrolling can be a great solution if the table contains more rows or columns than what we can place on the page comfortably.

The overflow property does not work on tables, so we have to convert tables into block elements first. This way we can size them and set up the overflow property. We can make tables vertically and horizontally scrollable.

We have to format the table like so:

 table {
 display:block;
 overflow:auto;
 height:200px;
 width:100%;
}

 

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

 

How to disable scrolling in HTML?

 

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

JavaScript:

Java:

Other materials:

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.