1. วิธีการถอดแถบเลื่อน
เพียงเพิ่มล้น: แอตทริบิวต์ที่ซ่อนอยู่ในร่างกาย มันจะไม่มีผลภายใต้ IE6 และ 7 คุณต้องเพิ่มการล้น: แอตทริบิวต์ที่ซ่อนอยู่ใน HTML
ในสไตล์ IE6, 7 และเบราว์เซอร์อื่น ๆ จำเป็นต้องมีความโดดเด่นด้วยการแฮ็ค นี่เป็นเพราะเมื่อหน้าถูกดึงด้านล่างหาก HTML หรือร่างกายมีการล้น: ซ่อนหน้าใต้ชั้นหลอดไฟโปร่งใสจะถูกซ่อนไว้บางส่วนตามปกติ สีเทาที่มองเห็นได้จากการดูโปร่งใสสีเฉพาะนั้นเกี่ยวข้องกับสีพื้นหลังที่กำหนดโดยแพลตฟอร์มและผู้ใช้
หลังจากถอดแถบเลื่อนในร่างกายหรือ HTML หน้าจะมีความกว้างของแถบเลื่อน/2 กระโดด! การกระโดดครั้งนี้แย่มากสำหรับประสบการณ์ผู้ใช้ดังนั้นเพิ่มช่องว่างภายในที่เหมาะสมให้กับร่างกายขนาดคือความกว้างของแถบเลื่อน ความกว้างของแถบเลื่อนใต้แพลตฟอร์ม Windows คือ 17px ความกว้างของแถบเลื่อนของนักเลื่อนที่แตกต่างกันภายใต้แพลตฟอร์ม Linux นั้นไม่สอดคล้องกัน คุณสามารถใช้รหัสที่เกี่ยวข้องเพื่อคำนวณความกว้างของแถบเลื่อน ต่อไปนี้เป็นตัวอย่างของแพลตฟอร์ม Windows
รหัสที่เกี่ยวข้อง:
document.documentelement.style.csstext = 'overflow: none;+overflow: hidden; _overflow: hidden;'; document.body.style.csstext = 'overflow: ซ่อน;+ล้น: ไม่มี;
รหัสข้างต้นไม่ได้พิจารณาว่า HTML หรือร่างกายมีสไตล์อินไลน์หรือไม่ หาก HTML หรือ body มีสไตล์อินไลน์จะต้องมีการสะสมมิฉะนั้นสไตล์ดั้งเดิมจะถูกล้าง
2. วิธีอื่น ๆ ในการลบอันตรายที่ซ่อนอยู่เลื่อนหน้า (ป้องกันไม่ให้เกิดความผิดพลาด)
หลังจากซ่อนแถบเลื่อนแล้วการเลื่อนหน้าด้วยล้อเมาส์จะไม่ขยับ ฉันคิดว่ามันโอเคไม่ใช่ ...
แป้นพิมพ์ลัดยังสามารถใช้งานการทำงานของเบราว์เซอร์บางส่วนที่เกี่ยวข้องกับหน้าเลื่อนเช่น: ปุ่มขึ้นและลงปุ่มเปิดหน้า ฯลฯ สำหรับแป้นพิมพ์ลัดพวกเขาจำเป็นต้องถูกยกเลิก
3. เพิ่มสไตล์เลเยอร์ป๊อปอัพ
เพิ่มสไตล์โลกให้กับร่างกาย (เข้ากันได้กับ IE6)
ความสูง: 100%;
เพิ่มสไตล์การเลื่อนลงในชั้นกระสุน
Overflow-y: auto; ความกว้าง: 100%; ความสูง: 100%; ซ้าย: 0; _padding: 0 17px 0 0; // ie6 bug, ช่องว่างขององค์ประกอบหลักยังคงถูกต้องหลังจากองค์ประกอบลูกอยู่ในตำแหน่งที่แน่นอน
บทความข้างต้นเกี่ยวกับหน้ากากชั้นป๊อปอัพ JS และหน้าพื้นหลังที่ซ่อนเร้นการวิเคราะห์การเพิ่มประสิทธิภาพแถบการเพิ่มประสิทธิภาพของแถบการเพิ่มประสิทธิภาพทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น