Как запретить скролл css

Как убрать горизонтальный скролл?

Каким образом можно убрать горизонтальный скролл, при этом сохранив адаптивность сайта?

/*GLOBAL*/ body < font-family: 'Open Sans', sans-serif, Arial; color: #332E3C; font-size: 16px; font-weight: 300; >a.btn < font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .5s; >a.btn:hover < background-color: rgba(0, 0, 0, .3); >.button < background: #067655; display: block; color: white; text-decoration: none; padding: 20px; border-radius: 4px; margin-top: 10px; -webkit-transition: background-color 0.2s ease-out; float: left; >.button:hover < background: #23a95c; >div .with_triangle < background-color: #f3f3f3; width: 100%; height: 100px; position: relative; >.with_triangle::before < content: ''; width: 20px; height: 20px; background-color: inherit; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); z-index: -1 >h2 < font-size: 30px; >/*HEADER*/ header < height: 750px; background: url(../images/header_background1200-2.jpg) no-repeat center bottom; position: relative; background-size: cover; align: center; >header a.logo < z-index: 1; position: absolute; display: block; width: 200px; height: 200px; background: url(../images/Teorema_logo_v5.png) no-repeat 0 0; background-size: contain; top: 26px; left: 80px; >header a.logo span < display: none; >header h1 < color: white; font-size: 35px; >header div.hero < position: absolute; width: 42%; top: 230px; left: 5%; >header div.hero h1

               
Teorema 
Онлайн-школа Teorema ищет преподавателей математики по скайпу.
 Регистрация преподавателя 
 

Как запретить скроллинг контента под модальным окном?

Необходимо, чтобы контент под модальным окном не прокручивался. Само модальное окно может прокручиваться, если оно слишком длинное (этот функционал уже реализован, просто предупреждаю, потому что видел решения, когда скроллинг блокировали вообще весь). Я пробовал вариант с установкой overflow: hidden . В принципе он почти идеален, но не очень красиво выглядит из-за изменения ширины окна. То есть лучше бы полоса прокрутки оставалась. Ещё я попробовал вот такой жёсткий вариант:

window.addEventListener('scroll', (e) => < window.scrollTo(0,0); >); 

1. Не убирало полосу прокрутки.
2. Не отбрасывало к верху страницы / не меняло бы положение на странице.

Отслеживать
задан 13 апр 2021 в 16:47
2,086 2 2 золотых знака 13 13 серебряных знаков 46 46 бронзовых знаков

Используйте свой «жёсткий вариант», раз он работает совместно с модалкой. Только перед появлением модального окна, вычислите значение прокрутки и подставляйте его вместо ноля.

13 апр 2021 в 17:04
@UModeL хм, я думал над этим, но хотел избежать) Попробую
13 апр 2021 в 17:05

другой способ — используя overflow: hidden , добавлять паддинг на ширину полосы прокрутки. Естественно, что нужно её сначала вычислить.

13 апр 2021 в 17:07

@UModeL не, лучше уж «жесткий» вариант. Над такой штукой тоже думал, но не на всех страницах скролл есть — придётся и его вычислять, есть он или нет. Ну и паддинг будет не так органично смотреться, нежели скролл

Как запретить скролл сайта, если поверх него есть фиксированный блок с прокруткой вниз?

Задача:
На мобильной версии сайта сделать меню поверх всего сайта.
Делаю просто, пример:

.menu

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

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

Комментировать
Решения вопроса 0
Ответы на вопрос 1

iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
задать для body когда этот блок активен
Ответ написан более трёх лет назад
Нравится 6 8 комментариев
Александр @Palehin Автор вопроса
Пробовал — не помогает

iBird Rose @iiiBird Куратор тега CSS
Александр: не может не помогать. значит не правильно пробуешь
Александр @Palehin Автор вопроса

iBird Rose: overflow: hidden — скрывает все, что находится ЗА ПРЕДЕЛАМИ элемента. Если его применить к body, в котором содержится куча контента (следовательно, элемент имеет большую высоту), то это никак не спасет ситуацию, потому что скроется все что находится ЗА ПРЕДЕЛАМИ body а не в нем.

В таком случае придется искусcтвенно выставлять высоту и ширину body

iBird Rose @iiiBird Куратор тега CSS

Александр: зачем? если ты при открытии своего меню задашь для body overflow: hidden — то сайт перестанет скроллится просто. а твое меню уже нормально будет скролится. а если закрыть меню — то overflow для body возвращаешь

Как отключить скролл 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; /* включает вертикальный скролл */ > 

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