Как убрать скролл станицы при фокусе инпута

Question

Как убрать скролл станицы при фокусе инпута

asdasdasd Ученик (54), на голосовании 4 месяца назад

Нужно убрать скрол страницы при фокусе на инпут,чтобы он просто покрывал контент

Answer 1

Чтобы убрать скролл страницы при фокусе на инпуте, можно использовать несколько методов. Основная идея заключается в том, чтобы заблокировать прокрутку, когда инпут получает фокус, и разблокировать её, когда инпут теряет фокус.

### CSS-метод

Можно применить такой подход, который использует CSS для блокировки прокрутки:

1. Создать класс блокировки прокрутки:

 .no-scroll { 
    overflow: hidden; 
}

2. Применить этот класс к тегу <body> при фокусе на инпуте и убрать его при потере фокуса:

### JavaScript-метод

Для применения и удаления этого класса можно использовать JavaScript:

Этот код добавляет класс no-scroll к тегу <body> при фокусе на инпуте и удаляет его при потере фокуса, блокируя и разрешая прокрутку соответственно.

### Метод с помощью JavaScript (без CSS)

Также можно выполнить блокировку и разблокировку прокрутки с помощью JavaScript без использования CSS-классов:

Этот метод сохраняет текущую позицию прокрутки и предотвращает прокрутку страницы, когда инпут находится в фокусе, возвращая прокрутку в исходное положение при попытке прокрутки. При потере фокуса прокрутка снова становится доступной.