วิธีการเจาะแบบเลื่อน Html5

เว็บไซต์จำเป็นต้องได้รับการดัดแปลงในด้านอุปกรณ์เคลื่อนที่ สำหรับ H5 บนมือถือและด้านเว็บ จะใช้โซลูชันเค้าโครงแบบยืดหยุ่น เช่น bluma

รายการที่ใช้ใน H5 ใช้ react-virtualized เพื่อวาดตาราง

เพื่อแสดงรายละเอียดเฉพาะของข้อมูลแถวเดียวในตาราง วิธีแก้ไขตามปกติคือการใช้หน้าใหม่หรือหน้าต่างป๊อปอัป

ใช้โซลูชันหน้าต่างป๊อปอัปที่นี่ รายละเอียดข้อมูลหลังจากคลิกข้อมูลแถวเดียวจะใช้การ์ดกิริยาของ bluma

สำหรับรายละเอียดและตัวอย่างเฉพาะ โปรดดูที่: https://bulma.io/documentation/components/modal/

หลังจากคลิกที่ข้อมูลแถวเดียว หน้าต่างป๊อปอัปจะแสดงข้อมูลโดยละเอียด และโมดอลการ์ดทั้งหมดจะถูกตั้งค่าเป็นตำแหน่ง:คงที่;

ไม่มีส่วนท้าย ให้ตั้งค่าความสูงของการ์ดกิริยาให้เป็นความสูงของทั้งหน้าจอ: 100vh

ผลงาน:

• เมื่อแสดงในเบราว์เซอร์ Chrome การ์ดโมดอลทั้งหมดจะใช้พื้นที่ทั้งหน้าจอ
• จอแสดงผลบนโทรศัพท์มือถือก็เต็มเช่นกัน แต่ปัญหาคือหากคุณขยับตามท่าทาง ส่วนช่องค้นหาของเบราว์เซอร์จะถูกดันขึ้น ในเวลานี้หน้ารายการข้อมูลใต้หน้าต่างป๊อปอัปสามารถทำได้ ให้เลื่อนแล้วชื่อของหน้าต่างป๊อปอัปจะครอบคลุมส่วนช่องค้นหาของเบราว์เซอร์เดิม แต่มีความล่าช้าระหว่างนี้ คุณสามารถดูข้อมูลในหน้าด้านล่างได้อย่างชัดเจน
• จะมีการแสดงผลอื่นบนโทรศัพท์มือถืออื่น ๆ หากความเร็วการเลื่อนค่อนข้างเร็วและคุณเลื่อนทันทีหลังจากหน้าต่างป๊อปอัปปรากฏขึ้น คุณจะเห็นช่องว่างเล็ก ๆ ที่ด้านล่างของหน้าต่างป๊อปอัปในทำนองเดียวกัน ด้านล่างหน้าต่างป๊อปอัปสามารถเลื่อนได้และมีความล่าช้าและการแสดงข้อมูลการเลื่อนที่ชัดเจน

สารละลาย:

JS + CSS ล้น: ซ่อนอยู่

เพิ่มคลาส css แบบไดนามิกให้กับหน้า html ใต้หน้าต่างป๊อปอัปผ่าน JS

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });} ฟังก์ชั่น openModal (เป้าหมาย) { var $target = document.getElementById (เป้าหมาย); rootEl.classList.add('is-clipped'); $target.classList.add('is-active');}

 ถูกคลิป { ล้น: ซ่อนไว้! สำคัญ}

เมื่อปิดหน้าต่างป๊อปอัป ให้ลบคลาส css ของเพจผ่าน JS: is-clipped

 ฟังก์ชั่น closeModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

อย่างไรก็ตามหลังจากทดสอบวิธีแก้ปัญหานี้ในแอปพลิเคชันแล้วพบว่าไม่สามารถแก้ปัญหาได้และปัญหาข้างต้นยังคงเกิดขึ้น

ตำแหน่ง JS + CSS: แก้ไข + scrollTop

แนวคิดการวางแผน:

1. เมื่อหน้าต่างป๊อปอัปปรากฏขึ้น ให้ตั้งค่าตำแหน่งของ html เป็นคงที่ หลังจากปิดหน้าต่างป๊อปอัป ให้ยกเลิกแอตทริบิวต์ตำแหน่งของ html
2. เนื่องจากหน้ารายการจะเลื่อน และแถวที่ถูกคลิกอาจเกิดขึ้นหลังจากการเลื่อนเกิดขึ้น จึงต้องคำนวณค่า scrollTop ของหน้า html เอง
3. เพราะหลังจากตั้งค่าตำแหน่งให้คงที่เมื่อหน้าต่างป๊อปอัปเกิดขึ้น ค่า scrollTop ของหน้า html จะกลายเป็น 0 และกลับสู่ด้านบนสุดของหน้า ดังนั้น หลังจากปิดหน้าต่างป๊อปอัป คุณจะต้องตั้งค่าด้วยตนเอง scrollTop ของหน้า html เพื่ออนุญาตให้เลื่อนไปยังตำแหน่งเดิมของหน้า html
4. เพื่อความเข้ากันได้ คุณต้องตั้งค่า scrollTop ของคุณสมบัติต่างๆ

ก่อนหน้าต่างป๊อปอัป:

 const scrollTop = global.document.documentElement.scrollTop ||. global.pageYOffset ||. global.document.body.scrollTop;global.document.documentElement.style.position = 'คงที่';this.scrollTop = scrollTop;

ปิดหน้าต่างป๊อปอัป:

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; global.pageYOffset = this.document.documentElement.scrollTop = this.scrollTop; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network