disable horizontal scroll CSS

Как отключить скролл css

Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.

Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:

Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:

.container  overflow: hidden; > 

Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .

Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:

body  overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ > 

В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.

Источник

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 Horizontal Scroll CSS

In this tutorial we will show you the solution of disable horizontal scroll CSS, sometimes as we see in some webpages, (it does not matter is they live or local) that they are a horizontal scrollbar. Then we see is no any content is outside dimensions and nothing special in code is used, then why it appears.

At this situation, we simply want to remove this scrollbar without any additional changes. So, how to done this/ how to remove this horizontal scrollbar, we will see in this article.

Step By Step Guide On Disable Horizontal Scroll CSS :-

In some online articles/ tutorials, we see that they suggest us to use overflow property of CSS to hide horizontal as well as vertical scrollbar, but that is not appropriate way.

When we use this overflow hidden in our codes, we see that this disabling horizontal as well as vertical scroll, so how to disable only horizontal scroll. Let us understand this with help of example.

     body  
TalkersCcode – CSS tutorials
 
Disable horizontal Scroll CSS
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
  

1. As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
2. Here, first of all, we create a basic structure of HTML, in which we use which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
3. After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
4. Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
5. Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
6. As, we see that in styles we use only overflow-x property with hidden value to disable to horizontal scroll using CSS. This helps us to disable horizontal scrolling, we hope with the help of these steps we are able to understand the above codes easily.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand how to disable horizontal scroll using CSS.

I hope this tutorial on disable horizontal scroll CSS helps you and the steps and method mentioned above are easy to follow and implement.

Источник

Как убрать полосу прокрутки с помощью CSS

Если у вас возникла необходимость убрать полосу прокрутки на сайте, есть легкий способ это реализовать с помощью CSS свойства.
В этой статье я расскажу, как на сайте убрать горизонтальную и вертикальную полосу прокрутки.

Как убрать горизонтальную полосу прокрутки

Итак, допустим, вы имеете вот такой сайт, где есть горизонтальная полоса прокрутки и вертикальная

Но вам необходимо убрать только горизонтальную полосу прокрутки.

Для этого открывайте свой файл со CSS стилями и добавляйте свойство overflow-x к селектору «html» или к «body»

Как убрать вертикальную полосу прокрутки

Допустим, вам уже необходимо убрать только вертикальную полосу прокрутки.

Для этого открывайте свой файл с CSS стилями и добавляйте свойство overflow-y к селектору «html» или к «body»

Как убрать горизонтальную и вертикальную полосу прокрутки

Допустим, вам необходимо убрать вертикальную и горизонтальную полосу прокрутки.

Для этого открывайте свой файл с CSS стилями и добавьте свойство overflow к селектору «html» или к «body»

или же добавьте свойство overflow-x и overflow-y к селектору «html» или к «body» :

Как и обещал – ничего сложно здесь не было.
Внимание , прежде чем убирать полосу прокрутки, подумайте, действительно ли вам это нужно.

Источник