ทฤษฎี
ดูการใช้งานปัจจุบันของเว็บไซต์ pinterest (อาจมีการเปลี่ยนแปลงในอนาคต) เมื่อคุณเปิดการซ้อนทับnoscrollชั้นจะถูกนำไปใช้กับbodyองค์ประกอบและการoverflow: hiddenตั้งค่าจึงbodyไม่สามารถเลื่อนได้อีกต่อไป
ซ้อนทับ (สร้างขึ้นบนเครื่องบินหรือมีอยู่แล้วภายในหน้าและทำให้มองเห็นผ่านทางdisplay: blockก็จะทำให้ไม่แตกต่างกัน) มีposition : fixedและoverflow-y: scrollมีtop, left, rightและbottomคุณสมบัติการตั้งค่าให้0: แบบนี้จะทำให้การซ้อนทับเติมวิวพอร์ตทั้งหมด
divภายในซ้อนทับแทนเพียงในposition: staticแล้วเลื่อนแนวตั้งที่คุณเห็นเป็นเรื่องที่เกี่ยวข้องกับองค์ประกอบที่ ดังนั้นเนื้อหาจึงสามารถเลื่อนได้ แต่การซ้อนทับยังคงอยู่
เมื่อคุณปิดการซูมคุณซ่อนการซ้อนทับ (ผ่านdisplay: none) และจากนั้นคุณสามารถลบออกทั้งหมดผ่าน javascript (หรือเฉพาะเนื้อหาที่อยู่ภายในขึ้นอยู่กับคุณว่าจะอัดมันอย่างไร)
ในขั้นตอนสุดท้ายคุณต้องลบnoscrollคลาสไปที่body(ดังนั้นคุณสมบัติโอเวอร์โฟลจะกลับไปเป็นค่าเริ่มต้น)
รหัส
ตัวอย่าง Codepen
(ใช้งานได้โดยเปลี่ยนaria-hiddenคุณลักษณะของการซ้อนทับเพื่อแสดงและซ่อนและเพิ่มการเข้าถึง)
มาร์กอัป
(ปุ่มเปิด)
<button type="button" class="open-overlay">OPEN LAYER</button>
(ปุ่มวางซ้อนและปิด)
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
Javascript (vanilla-JS)
var body = document.body,
overlay = document.querySelector('.overlay'),
overlayBtts = document.querySelectorAll('button[class$="overlay"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-overlay';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
สุดท้ายนี้เป็นอีกตัวอย่างหนึ่งที่โอเวอร์เลย์เปิดขึ้นพร้อมเอฟเฟกต์จางโดย CSS ที่transitionใช้กับopacityคุณสมบัติ นอกจากนี้ยังpadding-rightใช้เพื่อหลีกเลี่ยงการ reflow กับข้อความต้นแบบเมื่อแถบเลื่อนหายไป
ตัวอย่าง Codepen (จาง)
CSS
.noscroll { overflow: hidden; }
@media (min-device-width: 1025px) {
/* not strictly necessary, just an experiment for
this specific example and couldn't be necessary
at all on some browser */
.noscroll {
padding-right: 15px;
}
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; left: 0; right: 0; bottom: 0;
}
[aria-hidden="true"] {
transition: opacity 1s, z-index 0s 1s;
width: 100vw;
z-index: -1;
opacity: 0;
}
[aria-hidden="false"] {
transition: opacity 1s;
width: 100%;
z-index: 1;
opacity: 1;
}