ปิดการใช้งานการเลื่อนบนร่างกาย

138

ฉันต้องการปิดการเลื่อนบน HTML bodyทั้งหมด ฉันได้ลองใช้ตัวเลือกต่อไปนี้:

overflow: hidden; (ไม่ทำงานไม่ได้ปิดใช้งานการเลื่อนเพียงแค่ซ่อนแถบเลื่อน)
position: fixed; (วิธีนี้ใช้งานได้ แต่เลื่อนไปที่ด้านบนสุดซึ่งเป็นที่ยอมรับไม่ได้สำหรับแอปพลิเคชันเฉพาะนี้)

ฉันไม่พบทางเลือกอื่นสำหรับสองตัวเลือกนี้มีอีกหรือไม่?

html css scroll

— มิชาไวเดนมันน์
แหล่งที่มา

3

คุณใช้องค์ประกอบใด overflow: hidden?

— Sajad Karuthedath

คุณพยายามบรรลุอะไรที่นี่กันแน่? เป้าหมายสุดท้ายของคุณคืออะไร?

— jbutler483

2

การแสดงโค้ดที่เกี่ยวข้องจะช่วยให้คุณง่ายขึ้น

— Sleek Geek

1

ล้น: ซ่อน; คือหนทางที่จะไป หากไม่ได้ผลคุณมีปัญหาอื่น ๆ ใน css ของคุณ ลอง html, body {overflow: hidden;} ถ้าไม่ได้ผลให้ลอง * {overflow: hidden;} แล้วลองหาว่ามีอะไรผิดปกติ

— Jonas Grumann

246

ตั้งค่าheightและoverflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

— เสือดำ
แหล่งที่มา

3

ลืมเนื้อหา "html," before "ไป

2

ไม่ทำงานบน iOS เมื่อคุณมีองค์ประกอบซ้อนทับที่มีตำแหน่งคงที่

— notQ

1

คุณสามารถเพิ่ม "overflow": "hidden" และจะใช้งานได้ดี

— JPG

วิธีนี้ไม่ได้ผลสำหรับฉันในทันที แต่หลังจากการตรวจสอบ "ระยะขอบ" กำลังถูกแทนที่ที่ไหนสักแห่ง การตั้งค่า "margin: 0;" ขององค์ประกอบนั้น ทำเคล็ดลับ

— joaoprib

19

HTML css ทำงานได้ดีหาก body tag ไม่เขียนอะไรเลยเช่นกัน

<body scroll="no" style="overflow: hidden">

ในกรณีนี้การลบล้างควรอยู่บนแท็กร่างกายจะควบคุมได้ง่ายกว่า แต่บางครั้งก็ทำให้ปวดหัวได้

— Lalo
แหล่งที่มา

21

นี่ไม่ใช่ HTML5 ที่ถูกต้อง

— mbomb007

@ mbomb007 คุณสามารถแสดงความคิดเห็นเกี่ยวกับข้อผิดพลาดที่เกี่ยวข้องกับ HTML5 ได้หรือไม่?

— Ethan

5

@Ethan scrollแอตทริบิวต์ไม่ถูกต้องบน<body>แท็ก ไม่ได้ระบุว่าถูกต้องตามข้อมูลจำเพาะใด ๆ ที่ฉันสามารถหาได้ w3schools ; MDN ; Quackit

— mbomb007

14

โพสต์นี้มีประโยชน์ แต่อยากแบ่งปันทางเลือกเล็กน้อยที่อาจช่วยผู้อื่น:

การตั้งค่าmax-heightแทนที่จะheightเป็นเคล็ดลับ ในกรณีของฉันฉันกำลังปิดใช้งานการเลื่อนตามการสลับคลาส การตั้งค่า.someContainer {height: 100%; overflow: hidden;}เมื่อความสูงของคอนเทนเนอร์มีขนาดเล็กกว่าของวิวพอร์ตจะทำให้คอนเทนเนอร์ยืดออกซึ่งจะไม่เป็นไปตามที่คุณต้องการ การตั้งค่าmax-heightคำนึงถึงสิ่งนี้ แต่ถ้าความสูงของคอนเทนเนอร์มากกว่าวิวพอร์ตเมื่อเนื้อหาเปลี่ยนไปจะยังคงปิดการเลื่อน

— joebjoe
แหล่งที่มา

สิ่งนี้บันทึกวันของฉันสำหรับเบราว์เซอร์เดสก์ท็อปโดยไม่มีผลข้างเคียงที่ไม่ต้องการจากการเลื่อนด้านบน แต่ใช้ไม่ได้บนเบราว์เซอร์มือถือ (iphone5s และ android)

— บ็อบ

5

ในการดำเนินการนี้ให้เพิ่มคุณสมบัติ CSS 2 รายการใน<body>องค์ประกอบ

body {
   height: 100%;
   overflow-y: hidden;
}

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

— bvdb
แหล่งที่มา

ซึ่งจะซ่อนแถบเลื่อน อย่างไรก็ตามคำถามคือขอทางเลือกอื่นในการซ่อนแถบเลื่อนโดยเฉพาะ

— DataGeek

@DataGeek สิ่งนี้ไม่เพียง แต่ซ่อนแถบเลื่อนเท่านั้น แต่ยังหยุดความสามารถในการเลื่อนลงอีกด้วย และตามที่ฉันเข้าใจนั่นคือสิ่งที่ถูกขอ กล่าวคือไม่เพียงแค่ซ่อนมัน แต่ยังทำให้ไม่สามารถเลื่อนลงได้อีกด้วย

— bvdb