Убрать скролл без удаления полосы прокрутки

То что тобой подразумевается можно сделать плюс/минус через отслеживание событий колесика мыши... однако работать это будет крайне плохо, плюс контролировать тяжело.

 let sy = 0; 

    

window.addEventListener('mousewheel', () => { 

   sy = window.scrollY; 

}); 

    

window.addEventListener('scroll', () => { 

   window.scrollTo(0,sy); 

}); 

Лучшим решением для предотвращения смещения контента в виду исчезновения скроллинга будет перехват и добавление правого отступа для body...

 const modal = document.createElement('div');



document.querySelector('button').onclick = () => { 

   // Получение глобальных размеров окна 

   let w_w = window.innerWidth; 

   // Получить ширину body, исключая ширину полосы прокрутки 

   let b_w = +getComputedStyle(document.body).width.slice(0,-2); 

   // Получить размер ширины полосы прокрутки и перевести в пиксели 

   let s_w = (w_w - b_w) + 'px'; 

   // Добавить box-sizing: border-box для body, иначе padding будет снаружи 

   document.body.style.boxSizing = 'border-box'; 

   // Добавить новый правый отступ, равный ширине скроллинга 

   document.body.style.paddingRight = s_w; 

   // Скрыть скроллинг со страницы 

   document.body.style.overflowY = 'hidden'; 

   // Остальной код, отвечающий за появление модального окна 

   document.body.appendChild(modal); 

}



modal.onclick = () => { 

   // Удалить все добавленные ранее стили в body 

   document.body.removeAttribute('style'); 

   // Остальной код, отвечающий за исчезновение модального окна 

   modal.remove(); 

} 

Некоторые данные можно получать иными способами. Однако суть примера в том, чтобы ты понимал, что проблема смещения легко исправляется.

 // Получить ширину body, исключая ширину полосы прокрутки  

   let b_w = +getComputedStyle(document.body).width.slice(0,-2); 

Нужно на js вычислить ширину скроллбара, и когда модалка открыта добавлить к body padding-left, на закрытие не забыть убрать.

Как вычислить ширину прокрутки »