Disable scroll vertical css

How to Disable Scroll Bar in CSS

No doubt, scrolling plays a vital role in web applications. However, you may not need that scroll bar on your page at some point. For example, If the container covers only twenty-five percent of a web page and it is aligned left, the added scroll bar will surely get in the center. In such a situation, you can use a few CSS properties for disabling the scroll bar.

This article will cover the method to disable the scroll bar in CSS.

How to Disable Scroll Bar in CSS?

To disable the scroll bar on a page, use the following CSS properties:

Let’s explore each CSS property one by one.

Method 1: Use overflow-y Property to Disable Vertical Scroll Bar in CSS

The “overflow-y” property specifies what will happen if the content does not fit the container in a height-wise manner. It is also utilized to display the overflow content of a block-level element and to add or disable a scroll bar.

So, let’s take an example to check the procedure of disabling the vertical scroll bar with the help of the overflow-y CSS property.

For our HTML page, we will disable the vertical scroll bar present on the right side:

Place the desired HTML elements, as in our case, we will add a heading in the “ ” tag of the HTML file:

Disabling the Scrollbar < / h1 >To hide the vertical scroll bar, set the “overflow-y” property to “hidden”. The height and width of “200%” will be used to make the page longer and wider. This is how we will intentionally get the scroll bars on our page:

Save the provided code and run your HTML file in the browser:

As you can see, we have successfully disabled the vertical scroll bar using the overflow-y CSS property.

Method 2: Use overflow-x Property to Disable Horizontal Scroll Bar in CSS

When the content does not fit into the container in a width-wise manner, the “overflow-x” property is used to manage such scenarios. It sets what shows when the added content overflows a block-level element’s right and left edges. This CSS property can also be utilized for disabling the horizontal scroll bar.

Example

We will now disable the below-highlighted horizontal scroll bar of our HTML page:

To hide the horizontal scroll bar, set the “overflow-x to “hidden” and add the value of the height and width properties as stated in the previous example:

Want to disable both horizontal and vertical bars at once? If yes, then follow the next section!

Method 3: Use overflow Property to Disable Vertical and Horizontal Scroll Bars in CSS

When the content does not fit into the container horizontally as well as vertically, the “overflow” property specifies whether to add scroll bars or clip the content. You can also use this CSS property for disabling vertical and horizontal scroll bars simultaneously.

Example

In the same HTML file, we will add the “overflow” property and assign it a “hidden” value. This will disable the scroll bar for both places, horizontally and vertically:

We have offered instructions about disabling scroll bars using different CSS properties.

Conclusion

To disable scroll bars in CSS, you can use “overflow-x”, “overflow-y”, and the “overflow” properties. The overflow-x property is specifically utilized for disabling the vertical scroll bar, and the overflow-y property to disable horizontal scroll bars. Moreover, overflow property assists in disabling vertical and horizontal bars at once. This article discussed the methods to disable scroll bars in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Disable vertical overflow in HTML/CSS

Currently I’m learning about HTML/CSS, I want to create a blog in windows 8 style (metro style). But I have a problem in disabling the overflow-y. I’m using a table in of html with a fixed size of each table data. But whenever I add a cell into a row in the table, if the row is overflow in x direction, that cell automatically jump down. Is there anyway to avoid this? this is a part of my code: CSS:

/***Creating the dashboard in metro style***/ .dashboard < position: fixed; top: 10.5em; left: 0; padding-top: 1em; padding-left: 1em; padding-bottom: 1em; border: 5px solid white; overflow-x: scroll; overflow-y:hidden; >td < border: 3px solid yellow; float: left; margin: 0; color: black; width: 300px; font-size: 1.5em; cursor: pointer; position: relative; background-color: white; >.tile-1

 
 
 
I just got you babe 1
 
I just got you babe 2
 
I just got you babe 3
 
I just got you babe 4
 
I just got you babe 5
 
I just got you babe 6
 
 
I just got you babe 7
 
I just got you babe 8
 
I just got you babe 9
 
I just got you babe 10
 
I just got you babe 11
 
I just got you babe 12
 
 
I just got you babe 13
 
I just got you babe 14
 
I just got you babe 15
 
I just got you babe 16
 
I just got you babe 17
 
I just got you babe 18
 
I just got you babe 19
 
I just got you babe 20
 
 
 
 

Источник

Как убрать вертикальный скролл в CSS, но так, чтоб можно было бы прокручивать страницу вниз? [закрыт]

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Помогите, хочу убрать вертикальный скролл в css, но чтоб страницу можно было прокручивать вниз колесиком мыши

4 ответа 4

Вы не показали код, но могу дать такие css правила для того чтобы скрыть скроллбар и оставить возможность скролиинга

Существует правило CSS, которое может скрывать полосы прокрутки в браузерах на основе Webkit (Chrome и Safari). Это правило:

Существует правило CSS, которое может скрывать полосы прокрутки в IE 10+. Это правило:

Там раньше было правило CSS , которые могли бы скрыть полосы прокрутки в Firefox, но с тех пор он считается устаревшим. Это правило было:

А чтобы убрать скроллбар со всей страницы

Если хочешь убрать скролбар , тогда вот код CSS :

html < overflow: scroll; overflow-x: hidden; >::-webkit-scrollbar < width: 0px; /* remove scrollbar space */ background: transparent; /* optional: just make scrollbar invisible */ >/* optional: show position indicator in red */ ::-webkit-scrollbar-thumb

Так как действия со скролл-баров плохо работает, то приходится использовать костыли, типо такого:

.scroll-wrap < display: block; width: 300px; height: 100px; background: #ddd; overflow: hidden; >.scroll-wrap > .scroll

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Pellentesque vulputate elit quam, nec venenatis urna dictum sed.
 
Aenean ullamcorper magna a volutpat lobortis. Fusce cursus erat vitae hendrerit dignissim.
 
Quisque sapien velit, tristique ac fermentum at, ornare ac nulla.
 
Sed quis sapien sit amet ante tempus ultricies vitae eu mauris. Duis a rhoncus lectus.
 
Vestibulum dapibus nunc massa, nec posuere purus tincidunt eget.
 
Quisque rutrum lectus vulputate viverra laoreet.
 
 

Источник

Disable vertical scroll bar on div overflow: auto

These two CSS properties can be used to hide the scrollbars:

overflow-y: hidden; // hide vertical overflow-x: hidden; // hide horizontal 

Worth mentioning that you can still scroll in the div using tab , provided there are links or input elements in the hidden overflow

overflow-y:hidden; — Use this for hiding the Vertical scroll

overflow-x:auto; — Use this to show Horizontal scroll

Luke has mentioned as both hidden. so I have given this separately.

overflow: auto;
overflow-y: hidden;

For IE8: -ms-overflow-y: hidden;

If you want to accomplish the same in Gecko (NS6+, Mozilla, etc) and IE4+ simultaneously, I believe this should do the trick:V

This will be applied to entire body tag, please update it to your relevant css and apply this properties.

How about a shorthand notation?

This rules are compatible whit all browser:

body body::-webkit-scrollbar < width: 0 !important; >body < overflow: -moz-scrollbars-none; >body

if you want to disable the scrollbar, but still able to scroll the content of inner DIV, use below code in css,

.divHideScroll::-webkit-scrollbar < width: 0 !important >.divHideScroll < overflow: -moz-scrollbars-none; >.divHideScroll

divHideScroll is the class name of the target div.

It will work in all major browser (Chrome, Safari, Mozilla, Opera, and IE)

Источник