ฉันจะลบแถบเลื่อนแนวนอนใน div ได้อย่างไร

เมื่อฉันตั้งค่าoverflow: scrollฉันจะได้แถบเลื่อนแนวนอนและแนวตั้ง

มีวิธีลบแถบเลื่อนแนวนอนใน div หรือไม่?

overflow-x: hidden;

อย่าลืมเขียน overflow-x: hidden;

รหัสควรเป็น:

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

ด้วยoverflow-y: scrollแถบเลื่อนแนวตั้งจะอยู่ที่นั่นเสมอแม้ว่าจะไม่จำเป็นก็ตาม หากคุณต้องการให้ y-scrollbar มองเห็นได้เฉพาะเมื่อจำเป็นฉันพบว่าสิ่งนี้ใช้ได้:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

CSS

overflow-y: scroll;

เห็นมันบน jsFiddle

สังเกตว่าคุณลบออก-yจากoverflow-yคุณสมบัติแถบเลื่อนแนวนอนจะปรากฏขึ้น

เพิ่มโค้ดนี้ใน CSS ของคุณ มันจะปิดการใช้งานแถบเลื่อนแนวนอน

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

ไม่มีการเลื่อน (โดยไม่ระบุ x หรือ y):

.your-class {
   overflow: hidden;
}

ลบการเลื่อนแนวนอน:

.your-class {
   overflow-x: hidden;
}

ลบการเลื่อนแนวตั้ง:

.your-class {
   overflow-y: hidden;
}

ในการซ่อนแถบเลื่อนแนวนอนเราสามารถเลือกแถบเลื่อนของ div ที่ต้องการและตั้งค่าเป็น display: none;

สิ่งหนึ่งที่ควรทราบก็คือสิ่งนี้จะใช้ได้กับเบราว์เซอร์ที่ใช้ WebKit เท่านั้น (เช่น Chrome) เนื่องจากไม่มีตัวเลือกดังกล่าวสำหรับ Mozilla

ในการเลือกแถบเลื่อนให้ใช้ ::-webkit-scrollbar

ดังนั้นรหัสสุดท้ายจะเป็นดังนี้:

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

หากต้องการลบแถบเลื่อนแนวนอนให้ใช้รหัสต่อไปนี้ ได้ผล 100%

html, body {
    overflow-x: hidden;
}

หากคุณไม่มีอะไรล้นออกมาในแนวนอนคุณสามารถใช้

overflow: auto;

และจะแสดงแถบเลื่อนเมื่อจำเป็นเท่านั้น

ดูคุณสมบัติ CSS Overflow

ใช้:

overflow: auto;

สิ่งนี้จะแสดงแถบเลื่อนแนวตั้งและเฉพาะในกรณีที่มีการล้นในแนวตั้งมิฉะนั้นจะถูกซ่อนไว้

หากคุณมีทั้ง x และ y ล้นแถบเลื่อนทั้ง x และ y จะแสดง

หากต้องการซ่อนแถบเลื่อน x (แนวนอน) แม้ว่าจะมีเพียงแค่เพิ่ม:

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

เพื่อซ่อนscrollbarแต่พฤติกรรม

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

มีข้อ จำกัด นี้

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

ใช้โค้ดส่วนนี้ ..

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

ฉันเคยมีปัญหาเกี่ยวกับการใช้งาน

overflow: none;

แต่ฉันรู้ว่า CSS ไม่ชอบมันจริงๆและมันก็ไม่ได้ผล 100% ตามที่ฉันต้องการ

อย่างไรก็ตามนี่เป็นวิธีแก้ปัญหาที่สมบูรณ์แบบเนื่องจากเนื้อหาของฉันไม่ควรมีขนาดใหญ่กว่าที่ควรจะเป็นและสิ่งนี้ได้แก้ไขปัญหาที่ฉันมีแล้ว

overflow: auto;