นี่คือวิธีแก้ปัญหาของฉันที่ฉันใช้ในแอปพลิเคชัน
ฉันปิดการใช้งาน body overflow และวาง html ของเว็บไซต์ทั้งหมดไว้ในคอนเทนเนอร์ div คอนเทนเนอร์ของเว็บไซต์มีมากเกินไปดังนั้นผู้ใช้อาจเลื่อนหน้าเว็บได้ตามที่คาดไว้
จากนั้นฉันสร้าง div พี่น้อง (#Prevent) ด้วยดัชนี z ที่สูงกว่าซึ่งครอบคลุมทั้งเว็บไซต์ เนื่องจาก #Prevent มีดัชนี z สูงกว่าจึงซ้อนทับคอนเทนเนอร์ของเว็บไซต์ เมื่อมองเห็น #Prevent เมาส์จะไม่วางเมาส์เหนือคอนเทนเนอร์ของเว็บไซต์อีกต่อไปจึงไม่สามารถเลื่อนได้
แน่นอนคุณอาจวาง div อื่นเช่นโมดอลของคุณที่มีดัชนี z สูงกว่า #Prevent ในมาร์กอัป วิธีนี้ช่วยให้คุณสร้างหน้าต่างป๊อปอัปที่ไม่ประสบปัญหาการเลื่อน
วิธีนี้ดีกว่าเพราะไม่ซ่อนแถบเลื่อน (มีผลต่อการกระโดด) ไม่ต้องการผู้ฟังเหตุการณ์และง่ายต่อการนำไปใช้ มันทำงานได้ในทุกเบราว์เซอร์แม้ว่าคุณจะต้องเล่น IE7 & 8 (ขึ้นอยู่กับรหัสเฉพาะของคุณ)
html
<body>
<div id="YourModal" style="display:none;"></div>
<div id="Prevent" style="display:none;"></div>
<div id="WebsiteContainer">
<div id="Website">
website goes here...
</div>
</div>
</body>
css
body { overflow: hidden; }
#YourModal {
z-index:200;
}
#Prevent {
z-index:100;
position:absolute;
left:0px;
height:100%;
width:100%;
background:transparent;
}
#WebsiteContainer {
z-index:50;
overflow:auto;
position: absolute;
height:100%;
width:100%;
}
#Website {
position:relative;
}
jquery / js
function PreventScroll(A) {
switch (A) {
case 'on': $('#Prevent').show(); break;
case 'off': $('#Prevent').hide(); break;
}
}
ปิด / เปิดการเลื่อน
PreventScroll('on');
PreventScroll('off');