Как заблокировать скролл css

Как запретить скролл не ставя overflow:hidden

Как оставить полосу прокрутки и при этом запретить скролл на странице? Открывается модалка, и при этом, чтобы не было скролла всему html, который выше в несколько раз окна браузера, добавляется overflow:hidden, но при этом получается эффект прыгания по горизонтали из за того что полоса прокрутки то появляется, то исчезает. Как запретить скролл фона модалки не добавляя overflow:hidden, то есть оставив полосу прокрутки?

html < position:relative; margin:0 auto; /*overflow:hidden; - не нужно использовать*/ height:100vh; width:100%; >html body:after < content:''; background-color:rgba(0, 0, 0, 0.5); position:fixed; top:0; left:0; right:0; bottom:0; z-index:9; >modal

modal 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3 
1 
2 
3

UPD: Должна остаться функция скролла внутри модалки. И нельзя потерять позицию в основном контенте при открытии модалки, поэтому position:fixed не подходит.

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

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

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

body  overflow: hidden; > 

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

.container  overflow: hidden; > 

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

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

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

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

Как скрыть scrollbar на сайте?

Он скрывает вертикальный scrollbar, но нельзя использовать прокрутку с помощью колесика мыши. А на мобильной версии не работает прокрутка вообще. Как решить эту проблему?

• Вопрос задан более трёх лет назад
• 4832 просмотра

Комментировать
Решения вопроса 2

::-webkit-scrollbar

Ответ написан более трёх лет назад
Нравится 2 2 комментария

Дмитрий Лузанов @dmitry_luzanov
А потом глянуть в мозилу -_-

Владимир @bossonojka Автор вопроса

Спасибо. Все работает. И еще вопрос. Есть такой код:

::-webkit-scrollbar-button < background-image:url(''); background-repeat:no-repeat; width:6px; height:0px >::-webkit-scrollbar-track < background-color:#32312e; box-shadow:0px 0px 0px #000 inset; >::-webkit-scrollbar-thumb < -webkit-border-radius: 5px; border-radius: 0px; background-color:#28a7f0; background-image:url('https://yraaa.ru/_pu/24/59610063.png'); background-position:center; background-repeat:no-repeat; >::-webkit-resizer < background-image:url(''); background-repeat:no-repeat; width:7px; height:0px >::-webkit-scrollbar

Можно ли сделать так, чтобы полоса прокрутки была прозрачная (скрыта), а остался только синий слайдер? Пробовал с помощью rgba и transparent, но ничего не получилось.

Убрать горизонтальный скролл

Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?

Отслеживать
задан 22 мая 2012 в 15:19
3,197 7 7 золотых знаков 46 46 серебряных знаков 95 95 бронзовых знаков

6 ответов 6

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

Добавляем к блоку в котором нужно убрать скролл стиль (в CSS или напрямую)

overflow:hidden; overflow-y:hidden; /*для вертикального*/ overflow-x:hidden; /*для горизонтального*/

Отслеживать
ответ дан 22 мая 2012 в 16:53
174 7 7 бронзовых знаков

@UndReim вместо использования тегов pre чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.

23 мая 2012 в 11:17

Всё очень просто пишем:

html < width: 100%; max-width: 100%; overflow-x: hidden; >body

Отслеживать
80.8k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
ответ дан 4 мая 2017 в 9:49
81 1 1 серебряный знак 1 1 бронзовый знак

#wrapper

Обычно такого хватает. # wrapper — обертка всего сайта, обычно идет следом за body

Отслеживать
ответ дан 22 мая 2012 в 16:52
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
overflow: show — что?
4 мая 2017 в 10:03
Отслеживать
ответ дан 25 мая 2012 в 8:08
4,966 10 10 золотых знаков 33 33 серебряных знака 62 62 бронзовых знака

контейнеру, в который не влазит контент добавить свойство overflow:hidden; это скроет непомещающиеся части.

Отслеживать
ответ дан 24 мая 2012 в 10:37
1,596 8 8 серебряных знаков 15 15 бронзовых знаков

если я правильно понял, то одно из свойств CSS вам должно помочь position: absolute. А также можно поиграться вот с этими свойствами max-width и min-width. Можно еще попробовать обернуть картинку в DIV и этому же DIV`у задать background, и указать размеры картинки которая задана фоном.

Отслеживать
ответ дан 22 мая 2012 в 16:42
1,712 4 4 золотых знака 24 24 серебряных знака 51 51 бронзовый знак

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.