Для того чтобы реализовать скроллинг только внутри модального окна, вам потребуется использовать CSS и JavaScript.
1. В HTML-коде создайте элемент, который представляет модальное окно. Например, это может быть <div> с уникальным идентификатором modal.
<div id="modal"> <!-- Ваше содержимое модального окна --> </div>
2. В CSS определите стили для модального окна и окружающего контейнера. Укажите для основного контейнера (обычно <body>) overflow: hidden, чтобы скрыть скролл у всей страницы.
body {
overflow: hidden;
}
#modal {
overflow: auto;
height: 100%;
}
3. В JavaScript напишите функцию, которая будет открывать и закрывать модальное окно. В этой функции добавьте обработчики событий для прокрутки колеса мыши и нажатия клавиш, и установитеevent.preventDefault(). Это предотвратит прокручивание страницы при скроллинге внутри модального окна.
function openModal() {
// Показать модальное окно
document.getElementById("modal").style.display = "block";
// Запретить прокрутку страницы
document.body.style.overflow = "hidden";
// Обработчики событий для прокрутки колеса мыши и нажатия клавиш
document.addEventListener("wheel", preventScroll);
document.addEventListener("keydown", preventScroll);
}
function closeModal() {
// Скрыть модальное окно
document.getElementById("modal").style.display = "none";
// Разрешить прокрутку страницы
document.body.style.overflow = "auto";
// Удалить обработчики событий
document.removeEventListener("wheel", preventScroll);
document.removeEventListener("keydown", preventScroll);
}
function preventScroll(event) {
event.preventDefault();
}
4. Наконец, добавьте кнопки или ссылки, которые будут вызывать функцию открытия и закрытия модального окна.
<button onclick="openModal()">Открыть модальное окно</button> <button onclick="closeModal()">Закрыть модальное окно</button>
После реализации этих шагов, модальное окно должно появляться с прокруткой только внутри него, без возможности прокрутки самой страницы.