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

EvgeniyaPronina / no scroll

Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

//Запретить скролл:

$(«html,body»).css(«overflow»,»hidden»);

//или только вертикальный скролл:

$(«body»).css(«overflow-y»,»hidden»);

//и на css:

position:fixed;overflow:hidden

//Запретить scroll на чистом JS можно так:

document.body.style.overflow = ‘hidden’;

//Убрать скроллинг на IPAD можно так:

document.body.addEventListener(‘touchmove’,function(event),false);

//на jQuery:

$(document).bind(‘touchmove’, false);

//P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:

создаем сам класс

.fixed

position:fixed; /*позицианируем чтобы исчез скролл*/

width:100%; /*что бы верстка не складывалась по ширине*/

>

//Применяем когда нам это необходимо

$(«body»).addClass(«fixed»);

//и убираем его когда нужно сновa включить прокрутку

$(«body»).removeClass(«fixed»);

Источник

Как стилизовать или убрать полосу прокрутки — CSS скроллбар

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

1. ::-webkit-scrollbar — это фон самого скроллбара.
2. ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
3. ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
4. ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; } 

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; } 

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; } 

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } 

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; } 

Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); } 

Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); } 

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); } 

Источник

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.

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.

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.

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.

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! ?

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.

Sharing is caring

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник