ปิดใช้งานแถบเลื่อนแนวตั้งใน div ล้น: อัตโนมัติ

เป็นไปได้ไหมที่จะอนุญาตเฉพาะแถบเลื่อนแนวนอนเมื่อใช้โอเวอร์โฟลว์: อัตโนมัติ (หรือเลื่อน)

คุณสมบัติ CSS ทั้งสองนี้สามารถใช้เพื่อซ่อนแถบเลื่อน:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

คุณควรใช้เท่านั้น

overflow-y:hidden; - ใช้เพื่อซ่อนการเลื่อนแนวตั้ง

overflow-x:auto; - ใช้เพื่อแสดงการเลื่อนแนวนอน

ลุคได้กล่าวถึงทั้งสองอย่างซ่อนเร้น ดังนั้นฉันจึงให้สิ่งนี้แยกกัน

ล้น: อัตโนมัติ;
ล้น -y: ซ่อน;

สำหรับ IE8: -ms-overflow-y: hidden;

หรืออื่น ๆ :

ในการซ่อน X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

ในการซ่อน Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

หากคุณต้องการทำสิ่งเดียวกันใน Gecko (NS6 +, Mozilla ฯลฯ ) และ IE4 + พร้อมกันฉันเชื่อว่าสิ่งนี้น่าจะเป็นเคล็ดลับ: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

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

เพิ่มสิ่งต่อไปนี้:

body{
overflow-y:hidden;
}

กฎนี้เข้ากันได้กับเบราว์เซอร์ทั้งหมด:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

สัญกรณ์ชวเลขได้อย่างไร?

{overflow: auto hidden;}

หากคุณต้องการปิดการใช้งานแถบเลื่อน แต่ยังสามารถเลื่อนเนื้อหาของ DIV ภายในได้ให้ใช้โค้ดด้านล่างใน css

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll คือชื่อคลาสของ div เป้าหมาย

มันจะทำงานในเบราว์เซอร์หลักทั้งหมด (Chrome, Safari, Mozilla, Opera และ IE)