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`);
});
Initializing...