Как убрать прокрутку body в сафари при вызове модалки?

Question

[JyriG]

Привет всем!
Я настроил модалку, задал ей прокрутку, при нажатии на кнопку модалки в body убирается overflow, но он всё равно прокручивается. У меня получается так, что пытаясь прокручивать модалку у меня прокручивается body. Такой лаг присуствует только в сафари, в других браузерах такого нет. Как это убрать? Вот JS код:

//First modal
var btn_first = document.querySelector('.modal-first-button'), 
    modal_first = document.querySelector('.modal-first'), 
    closeBtn_first = document.querySelector('.closeBtn-first');
    body = document.querySelector('body')


btn_first.addEventListener('click', function() {
    modal_first.style.display = 'flex'; 
    body.style.overflow = 'hidden';
})

closeBtn_first.addEventListener('click', function () {
	modal_first.style.display = "none";
  body.style.overflow = 'scroll';
})

window.addEventListener('click', function (e) {
	if(e.target == modal_first) {
   		modal_first.style.display = "none";
      body.style.overflow = 'scroll';
	}  	
})


//Second modal
var btn_second = document.querySelector('.modal-second-button'), 
    modal_second = document.querySelector('.modal-second'), 
    closeBtn_second = document.querySelector('.closeBtn-second');


btn_second.addEventListener('click', function() {
    modal_second.style.display = 'flex';
    body.style.overflow = 'hidden';
})

closeBtn_second.addEventListener('click', function () {
	modal_second.style.display = "none";
  body.style.overflow = 'scroll';
})

window.addEventListener('click', function (e) {
	if(e.target == modal_second) {
   		modal_second.style.display = "none";
      body.style.overflow = 'scroll';
	}  	
})


//Third modal
var btn_third = document.querySelector('.modal-third-button'), 
    modal_third = document.querySelector('.modal-third'), 
    closeBtn_third = document.querySelector('.closeBtn-third');


btn_third.addEventListener('click', function() {
    modal_third.style.display = 'flex';
    body.style.overflow = 'hidden'; 
})

closeBtn_third.addEventListener('click', function () {
	modal_third.style.display = "none";
  body.style.overflow = 'scroll';
})

window.addEventListener('click', function (e) {
	if(e.target == modal_third) {
   		modal_third.style.display = "none";
      body.style.overflow = 'scroll';
	}  	
})


//Fourth modal
var btn_fourth = document.querySelector('.modal-fourth-button'), 
    modal_fourth = document.querySelector('.modal-fourth'), 
    closeBtn_fourth = document.querySelector('.closeBtn-fourth');


btn_fourth.addEventListener('click', function() {
    modal_fourth.style.display = 'flex'; 
    body.style.overflow = 'hidden';
})

closeBtn_fourth.addEventListener('click', function () {
	modal_fourth.style.display = "none";
  body.style.overflow = 'scroll';
})

window.addEventListener('click', function (e) {
	if(e.target == modal_fourth) {
   		modal_fourth.style.display = "none";
      body.style.overflow = 'scroll';
	}  	
})

//Fifth modal
var btn_fifth = document.querySelector('.modal-fifth-button'), 
    modal_fifth = document.querySelector('.modal-fifth'), 
    closeBtn_fifth = document.querySelector('.closeBtn-fifth');


btn_fifth.addEventListener('click', function() {
    modal_fifth.style.display = 'flex';
    body.style.overflow = 'hidden'; 
})

closeBtn_fifth.addEventListener('click', function () {
  modal_fifth.style.display = "none";
  body.style.overflow = 'scroll';
})

window.addEventListener('click', function (e) {
  if(e.target == modal_fifth) {
      modal_fifth.style.display = "none";
      body.style.overflow = 'scroll';
  }   
})

//Modal Tuotekuva
// var btn_sizes = document.querySelector('.btn_sizes'), 
//     modal_sizes = document.querySelector('.modal_sizes'), 
//     closeBtn_sizes = document.querySelector('.closeBtn_sizes');


// btn_sizes.addEventListener('click', function() {
//     modal_sizes.style.display = 'flex'; 
// })

// closeBtn_sizes.addEventListener('click', function () {
//   modal_sizes.style.display = "none";
// })

// window.addEventListener('click', function (e) {
//   if(e.target == modal_sizes) {
//       modal_sizes.style.display = "none";
//   }  
// })

Comments

[FeST1VaL]

Зачем вы дублируете код? сделайте класс scrollbar-locked какой то и в нем уже что то типо такого:

.scrollbar-locked {
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
	-ms-touch-action: pan-x;
	touch-action: pan-x;
}

И дальше просто или добавляете этот класс или убираете, как минимум сократите код.

Плюс зачем вы каждый раз создаете новый блок под модалку? у вас еще и стили наверно у всех одинаковые и продублированные?

Один контейнер куда помещаете модалку и одна так сказать кнопка по которой модалка закрывается

Насчет прокрутки смогу только вечером ответить) скриптик скинуть. По сути вам надо отслеживать начала скролла или touchmove и запрещать

[JyriG]

Артем Будин, Ок, указанный вами скрипт сработает для сафари?