ปิดใช้งานแถบเลื่อนแนวตั้งและแนวนอนของเบราว์เซอร์

117

เป็นไปได้ไหมที่จะปิดการใช้งานแถบเลื่อนแนวตั้งและแนวนอนของเบราว์เซอร์โดยใช้ jQuery หรือ javascript

javascript jquery

ฉันคิดว่าในบางสถานการณ์เป็นพิเศษหากคุณต้องการสลับระหว่างการเลื่อนและไม่เลื่อนวิธีนี้ดีกว่า: stackoverflow.com/questions/8701754/…

— Yousef Salimpour

คุณสามารถค้นหาคำตอบที่สมบูรณ์มากขึ้นสำหรับคำถามนี้ได้ที่stackoverflow.com/a/25561646/1922144

— davidcondrey

144

ในกรณีที่คุณต้องการความเป็นไปได้ในการซ่อนและแสดงแถบเลื่อนแบบไดนามิกที่คุณสามารถใช้ได้

$("body").css("overflow", "hidden");

และ

$("body").css("overflow", "auto");

ที่ไหนสักแห่งในรหัสของคุณ

— Alexander Prokofyev
แหล่งที่มา

4

Overflow hidden ไม่ทำงานใน IE เสมอไป ดูคำตอบของ AnthonyWJones ด้านล่าง

— Tiago Almeida

4

oveflow: hiddenจะไม่ป้องกันสิ่งใดบนสมาร์ทโฟน

— dvlden

ในโครเมี่ยมสิ่งนี้จะปิดใช้งานแถบเลื่อนโดยไม่ต้องซ่อนมัน (ยังคงอยู่ที่นั่นและยังคงเปลี่ยนขนาดของทุกอย่าง แต่ตอนนี้เป็นสีเทา)

— taltamir

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

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

5

การโหวตเพิ่มขึ้นสองครั้งนั้นน้อยมากสำหรับการเป็นคำตอบจาวาสคริปต์ที่บริสุทธิ์เพียงอย่างเดียว

— Fzs2

2

@HermannIngjaldsson: เมื่อเห็น OP ถามหาโซลูชัน JavaScript หรือ jQuery และยอมรับโซลูชัน jQuery เมื่อ 4 ปีที่แล้วมันก็สมเหตุสมผลแล้ว ฉันไม่ได้บอกว่าคำตอบไม่ดีเพียงแค่ระบุความชัดเจนเกี่ยวกับคะแนนโหวตที่ต่ำกว่า +1 จากฉันอยู่แล้ว

— Nope

นี่เป็นทางออกเดียวที่ใช้ได้ผลสำหรับฉันเนื่องจากเนื้อหาที่ซ่อนอยู่ล้นไม่โจมตีเอกสารทั้งหมดนี่เป็นทางออกที่เหมาะสมสำหรับปัญหานี้! ขอบคุณมากคุณช่วยฉันได้มาก!

— Adnane

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

— haipham23

50

ลองใช้ CSS

<body style="overflow: hidden">

— เรย์ลู
แหล่งที่มา

15

เพื่อความเข้ากันได้ของเบราว์เซอร์ฉันจะเพิ่มสไตล์นี้ในแท็ก HTML ด้วย: html, body {overflow: hidden;}

— Ady

32

จนถึงตอนนี้เรามีล้น: ซ่อนอยู่ในร่างกาย อย่างไรก็ตาม IE ไม่ให้เกียรติสิ่งนั้นเสมอไปและคุณต้องใส่ scroll = "no" ไว้ในองค์ประกอบเนื้อหาด้วยและ / หรือวาง overflow: ซ่อนไว้ในองค์ประกอบ html ด้วย

คุณสามารถดำเนินการต่อไปได้เมื่อคุณต้องการ 'ควบคุม' พอร์ตมุมมองที่คุณสามารถทำได้: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

องค์ประกอบที่ได้รับความสูง 100% ในร่างกายมีความสูงเต็มของวิวพอร์ตของหน้าต่างและองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนโดยใช้ด้านล่าง: nnPX จะตั้งค่าพิกเซล nn เหนือขอบด้านล่างของหน้าต่างเป็นต้น

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

2

ไม่ควร ',' ควรจะเป็น ';' ในร่างกาย css?

— paynestrike

12

ลองใช้ CSS

หากคุณต้องการลบแนวนอน

overflow-x: hidden;

และถ้าคุณต้องการลบแนวตั้ง

overflow-y: hidden;

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

10

ในรุ่นที่ทันสมัยของ IE (IE10 และสูงกว่า), เลื่อนสามารถที่ซ่อนอยู่โดยใช้สถานที่ให้บริการ-ms-overflow-style

html {
     -ms-overflow-style: none;
}

ใน Chrome สามารถกำหนดสไตล์แถบเลื่อนได้:

::-webkit-scrollbar {
    display: none;
}

สิ่งนี้มีประโยชน์มากหากคุณต้องการใช้การเลื่อนเนื้อหา "ค่าเริ่มต้น" ในเว็บแอปพลิเคชันซึ่งเร็วกว่าoverflow-y: scrollมาก

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

เพียงแค่นี้ได้ผลสำหรับฉันจากคำตอบทั้งหมด :) ขอบคุณ!

— Gediminas

9

ในกรณีที่คุณต้องการการสนับสนุนสำหรับ Internet Explorer 6 เพียงแค่ล้นhtml

$("html").css("overflow", "hidden");

และ

$("html").css("overflow", "auto");

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

5

IE มีข้อบกพร่องบางอย่างกับแถบเลื่อน ดังนั้นหากคุณต้องการอย่างใดอย่างหนึ่งคุณต้องรวมสิ่งต่อไปนี้เพื่อซ่อนแถบเลื่อนแนวนอน:

overflow-x: hidden;
overflow-y:scroll;

และซ่อนแนวตั้ง:

overflow-y: hidden;
overflow-x: scroll;

— Zeeshan Ali
แหล่งที่มา

4

(ฉันยังไม่สามารถแสดงความคิดเห็นได้ แต่ต้องการแบ่งปันสิ่งนี้):

รหัสของ Lyncee ใช้ได้กับฉันในเบราว์เซอร์เดสก์ท็อป อย่างไรก็ตามบน iPad (Chrome, iOS 9) แอปพลิเคชันขัดข้อง เพื่อแก้ไขฉันเปลี่ยนไป

document.documentElement.style.overflow = ...

ถึง

document.body.style.overflow = ...

ซึ่งช่วยแก้ปัญหาของฉันได้

— Erasmus Cedernaes
แหล่งที่มา

2

เพราะ Firefox มีลูกศรตัดสั้นที่สำคัญคุณอาจต้องการที่จะนำ<div>ไปรอบ ๆ ด้วยสไตล์ overflow:hidden;CSS:

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

2

การใช้ JQuery คุณสามารถปิดการใช้งานแถบเลื่อนด้วยรหัสนี้:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

นอกจากนี้คุณสามารถเปิดใช้งานได้อีกครั้งด้วยรหัสนี้:

 $('body').unbind('mousewheel');

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