Для предотвращения изменения положения скролла страницы при открытии модального окна без использования JavaScript, вы можете применить следующий способ с использованием CSS:
Вместо скрытия скроллбара с помощью `overflow: hidden;` на элементе `body` или `html`, вы можете использовать `overflow-y: scroll;` для того, чтобы скроллбар оставался видимым, но был неактивен, если содержимое страницы полностью вмещается в область просмотра. Это предотвратит смещение контента из-за появления и исчезновения вертикального скроллбара:
```css
body.modal-open {
overflow-y: scroll;
}
```
Когда модальное окно открывается, вы добавляете класс `modal-open` к элементу `body`. Это гарантирует, что скроллбар остаётся на своем месте, но не позволяет прокрутке страницы:
```js
document.body.classList.add('modal-open');
```
Когда модальное окно закрывается, вы удаляете класс `modal-open`:
```js
document.body.classList.remove('modal-open');
```
Так как скроллбар всегда присутствует (активен или нет), изменение положения страницы при открытии или закрытии модального окна не происходит.
Если этот метод не подходит и вы ищете альтернативное решение, которое полностью скрывает скроллбар без использования JavaScript для изменения отступов, посмотрите, нет ли в вашем браузере особенностей, которые позволяют сохранить макет страницы при изменении режима overflow. Например, некоторые браузеры не изменяют ширину области просмотра при скрытии скроллбара. К сожалению, такое поведение не стандартизировано и может отличаться от браузера к браузеру, а также зависеть от операционной системы.