Không cho cuộn trang khi mở Modal

Xử lý cuộn trang khi mở modal

Cách đơn giản nhất

Đặt độ cao của body = 100% của viewport, sau đó cho overflow thành hidden, thêm mục padding right = 15 để fix trường hợp trang đã có thanh cuộn rồi

body.model-open {
    height: 100vh;
    overflow-y: hidden;
    padding-right: 15px;
}

Trên mobile

Cách trên chạy tốt trên desktop và android, buồn thay iOS vẫn cuộn được, thêm position fixed để sửa bug này

body {
    position: fixed;
}

Tuy nhiên, cách này vẫn bị vấn để bự khác, nếu cuộn xuống dưới, mở modal lên, đóng lại thì trang cuộn lên đầu

Giải pháp cuối cùng

Đi đâu rồi cũng về javascript thôi. Lưu lại vị trí scroll, set lại vị trí này khi đóng modal

Khi bung modal

const showDialog = () => {
  document.getElementById('dialog').classList.add('show')
  const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
  const body = document.body;
  body.style.position = 'fixed';
  body.style.top = `-${scrollY}`;
};

Khi đóng modal

const closeDialog = () => {
  const body = document.body;
  const scrollY = body.style.top;
  body.style.position = '';
  body.style.top = '';
  window.scrollTo(0, parseInt(scrollY || '0') * -1);
  document.getElementById('dialog').classList.remove('show');
}
window.addEventListener('scroll', () => {
  document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
});

Prevent Page Scrolling When a Modal is Open

Không cho cuộn trang khi mở Modal