Для того чтобы разрешить прокрутку только в модальном окне и не влиять при этом на основное содержимое страницы (не прокручивать body), можно использовать следующие CSS свойства в вашем модальном окне.
1. При открытии модального окна поставить `overflow: hidden;` на тег `<body>` для блокировки скролла основного содержимого:
```css
.body-lock {
overflow: hidden;
height: 100%; /* или использовать 'vh' единицы */
}
```
Добавьте этот класс к тегу `<body>` при открытии модального окна и уберите его, когда оно закрывается.
2. В стилях для модального окна установите `overflow-y: auto;` чтобы включить вертикальную прокрутку, а также заранее задайте максимальную высоту:
```css
.modal {
overflow-y: auto;
max-height: 100vh; /* свойство max-height ограничит высоту модального окна */
/* другие необходимые стили для стилизации и позиционирования */
}
```
Таким образом, когда у `<body>` установлен класс `.body-lock`, скролл страницы блокируется, но прокрутка осуществляется внутри модального окна благодаря свойству `overflow-y: auto`.
Если вам также нужно предусмотреть возможность поддержки прокрутки для пользователей, при использовании клавиатуры или скроллинга на устройствах с сенсорными экранами, следует применить некоторые дополнительные скрипты на JavaScript/JQuery для блокировки фокуса внутри модального окна и для обеспечения корректной обработки событий прокрутки.
Например, вы можете использовать следующий пример кода на JavaScript для управления классом `.body-lock`:
```javascript
function toggleScrollLock() {
document.body.classList.toggle('body-lock');
}
// При открытии модального окна
openModalButton.addEventListener('click', function() {
toggleScrollLock();
// ... Ваш код для открытия модального окна
});
// При закрытии модального окна
closeModalButton.addEventListener('click', function() {
toggleScrollLock();
// ... Ваш код для закрытия модального окна
});
```
Однако, обратите внимание, что при таком подходе необходимо также позаботиться о том, чтобы правильно восстанавливать позицию прокрутки на странице после замены стилей и возвращения скролла body. Это может понадобиться для сохранения положения пользователя на странице после закрытия модального окна.