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

Question

[Skilful221]

Заказчик жалуется что у него модальное окно выглядит вот так
делаю окно модалки вот для этого сайта
есть почти такой же сайт в нем заказчик говорит что у него мдальное окно выглядит нормально
в общем я решил переделать скролл(как сделано в сайте№2) чтобы при открывании модалки у body появлялось overflow-y: hidden -отключался скролл
а у модального окна он появлялся свой скролл overflow-y: auto, как сделано в сайте №2.
но не работает почему-то

$(function(){
	function showModal(id){
		$(document.body).addClass('modal_hidden');
		$(id).addClass('modal_active');
		console.log(id);
	}
	function hideModals(){
		$(document.body).removeClass('modal_hidden');
		$('.modal').removeClass('modal_active');
	}

	$(".button_modal").on('click', function(e){
		console.log(e);
		showModal('#modal');
 });
	
	$(document).on('click', function(e){
		if (!(
		($(e.target).parents('.modal-block').length)
		||	($(e.target).hasClass('modal-block'))
		||	($(e.target).hasClass('button_modal')))
		) {
			hideModals();
		}
	});
	
});

мне кажется проблема связана с тем что modal_active-hidden всегда находится на body, хотя должен появляться только при нажатии на модальное окно

.modal
  position: fixed
  display: none
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: rgba(#000, 0.7)
  +reg
  z-index: 2
  overflow-x: hidden
  overflow-y: auto
  &_active
    display: flex
    flex-direction: column
    &-hidden
      overflow-y: hidden

Comments

[Lord_Dantes]

Слайды с текстом картинкой)

Answer 1

[Владимир Мацуев]

вам на body нужно вешать класс, который будет скрывать основной скрол, когда модалка открыта

spoiler

.modal-open {
overflow: hidden;
}

у меня скрол в модальном окне работает

Comments

[Skilful221]

вот я его повесил, но почему-то скролл отстается и не куда не девается.

[Владимир Мацуев]

ага я понял, удалите это тогда и добавьте height: 100vh; у класса .modal_active-hidden

.modal_active-hidden {
    overflow-y: hidden;
    height: 100vh;
}

[Skilful221]

Владимир Мацуев, отлично одну проблему решили) скролл пропал, но вон новый почему-то не отображается, хотя он прописан для модального окна

[Владимир Мацуев]

хм, я вижу скрол и на скрине у вас нечему скролится (видна нижняя граница), попробуйте отступы к модалке добавить или по высоте браузер уменьшить

[Skilful221]

Владимир Мацуев, да скрол удалось включить и модалка при уменьшении высоты скролится в низ, но не в верх, и окно уплывает вверх в небытие, можете подсказать как с этим быть?

[Владимир Мацуев]

у .modal-block поиграть надо с top и transform. сейчас у вас блок по центру сделан