Как отключить scroll css

How TO — Hide Scrollbar

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

Example

body <
overflow: hidden; /* Hide scrollbars */
>

To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x :

Example

body <
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
>

Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar display: none;
>

/* Hide scrollbar for IE, Edge and Firefox */
.example -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
>

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

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

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

Закрыт 4 года назад .

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

Отслеживать
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
задан 18 мар 2019 в 20:39
Артур Полетаев Артур Полетаев
19 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
спрятать скролбар?
18 мар 2019 в 20:40
рабочий код покажите
18 мар 2019 в 20:40
Только вниз? Уточните вопрос.
19 мар 2019 в 5:33

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

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

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

.element::-webkit-scrollbar

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

.element

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

.element

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

::-webkit-scrollbar

Отслеживать
ответ дан 18 мар 2019 в 20:46
midnightelf18 midnightelf18
1,872 13 13 серебряных знаков 28 28 бронзовых знаков

Если хочешь убрать скролбар , тогда вот код 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

Отслеживать
ответ дан 18 мар 2019 в 20:48
132 11 11 бронзовых знаков

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

.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.
 
 

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

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:

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)

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

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:

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)

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

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:

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)

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

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:

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)

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

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.

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:

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)

 /* 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.

Become The Best Frontend Developer ��

Take a look at Codedamn’s frontend learning path. It is the best way to start your frontend web developer journey and become an employable developer. Thousands of companies today need frontend developers learning about JavaScript, React, and more.

Unlimited access to all platform courses

100+ practice projects included

ChatGPT Based Instant AI Help

Structured Roadmap To Get A Job

Sharing is caring

Did you like what Subhanu Sankar Roy wrote? Thank them for their work by sharing it on social media.

Как подключить CSS к HTML

Каскадные таблицы стилей — это неотъемлемая часть современного web-сайта. Поэтому, вебмастер обязан знать как подключить CSS к документу HTML.

Ниже подготовлено 4 наиболее известных способа, которые помогут понять принцип правильного добавления стилей.

• Как подключить внешние стили из файла «CSS»;
• Подключение стилей через тег «Style»;
• Подключение встроенной таблицы стилей;
• Как подключить один css в другой css файл.

Как подключить внешние стили из файла «CSS»

На моем сайте насчитывается порядка 5 000 строчек стилей. Грузить такой объем при формировании каждой страницы, не правильно. К тому же, этот процесс ресурсозатратен, что, безусловно, скажется на скорости открытия сайта.

Вероятно думаете: «А как правильно подключать стили?» Все очень просто, таблицу стилей следует подключать из внешнего файла CSS.

Файл со стилями, имеет расширение .css . Его, конечно, можно размещать в любом месте на ftp, но обычно, подобные файлы помещают в папку «CSS», расположенную внутри файлов шаблона.

Чтобы подключить внешний файл CSS, нужно в коде сайта, между тегами «head», добавить строчку:

где «style.css» — это имя подключаемой таблицы, а «css», папка в которой находятся эти стили.

Приведу простой пример, стандартной страницы web-документа:

      . 

Важное добавление!! Атрибут href может принимать как абсолютный, так же и относительный путь к файлу.

Это означает, что две приведенные ниже строчки, будут абсолютно одинаково работать.

1. Абсолютная ссылка. Явно указывает на расположение файла.

1. Относительная ссылка. Сокращенный вариант.

Главный файл стилей, принять называть «style.css», но это не значит что других названий быть не должно. Придумывайте любое имя, но не забывайте, что оно должно быть на латинице.

Рассмотренный способ наиболее удобен, таким образом можно подключить не один, а сразу несколько таблиц стилей.

Подключение стилей через тег «Style»

Стили можно подключать непосредственно на странице web-сайта. Между тегами head, добавьте тег style. Внутри этого тега, можно применить стили к именно той странице, на которой они выводятся.

Практически это выглядит следующим образом:

То есть, все параграфы, должны иметь межстрочный интервал 2em. И это будет действовать на всех страница, на которых будут выводиться данные строчки.

     p . 

Подключение встроенной таблицы стилей

Атрибут style, добавленный к определенному элементу разметки сайта, позволит подключить стили css только для этого элемента.

Покажу как это выглядит в тексте:

Подключаем встроенную таблицу стилей.

Стиль, будет применен только для данного блока div и раскрасит текст в заказанный цвет.

Этот способ отлично подходит при создании красивых таблиц в документе, как например вот эта.

Как подключить один css в другой css файл

В заключении, хочу рассмотреть способ, в котором будем подключать в основном файле css, дополнительный.

1. Откроем файл «style.css».
2. Добавим код @import url «/css/blt.css»; .
3. Сохраняем изменения.

Следовательно, при помощи @import, мы можем подключить таблицу стилей из другого файла css. В данном случае, в теле основного файла стилей, подключаем «blt.css», который находится в папке «css».

Кроме того, аналогичным способом, можно подключать внешние стили и в теге «Style». Будет выглядеть так:

     @import url("/css/blt.css") p . 

Таким образом мы рассмотрели самые лучшие способы как подключить CSS к HTML. Если вы хотите добавить свой вариант, пишите его в комментариях.