Làm cách nào để xóa thanh cuộn ngang trong div?

Khi tôi đặt overflow: scroll, tôi nhận được thanh cuộn ngang và dọc.

Có cách nào để loại bỏ thanh cuộn ngang trong div không?

overflow-x: hidden;

Đừng quên viết overflow-x: hidden;

Mã phải là:

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

Với overflow-y: scroll, thanh cuộn dọc sẽ luôn ở đó ngay cả khi không cần thiết. Nếu bạn muốn thanh cuộn y chỉ hiển thị khi cần, tôi đã tìm thấy công việc này:

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

CSS

overflow-y: scroll;

Xem nó trên jsFiddle .

Lưu ý nếu bạn xóa -ykhỏi thuộc overflow-ytính, thanh cuộn ngang được hiển thị.

Thêm mã này vào CSS của bạn. Nó sẽ vô hiệu hóa thanh cuộn ngang.

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

Không cuộn (không chỉ định x hoặc y):

.your-class {
   overflow: hidden;
}

Xóa cuộn ngang:

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

Xóa cuộn dọc:

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

Để ẩn thanh cuộn ngang, chúng ta chỉ cần chọn thanh cuộn của div cần thiết và đặt nó thành display: none;

Một điều cần lưu ý là điều này sẽ chỉ hoạt động cho các trình duyệt dựa trên WebKit (như Chrome) vì không có tùy chọn như vậy có sẵn cho Mozilla.

Để chọn thanh cuộn, sử dụng ::-webkit-scrollbar

Vì vậy, mã cuối cùng sẽ như thế này:

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

Để loại bỏ thanh cuộn ngang, sử dụng mã sau đây. Nó hoạt động 100%.

html, body {
    overflow-x: hidden;
}

Nếu bạn không có bất cứ thứ gì tràn ra theo chiều ngang, bạn cũng có thể sử dụng

overflow: auto;

và nó sẽ chỉ hiển thị thanh cuộn khi cần thiết.

Xem Thuộc tính tràn CSS

Sử dụng:

overflow: auto;

Điều này sẽ hiển thị thanh cuộn dọc và chỉ khi có tràn dọc, nếu không, nó sẽ bị ẩn.

Nếu bạn có cả tràn x và y, thì cả thanh cuộn x và y sẽ được hiển thị.

Để ẩn thanh cuộn x (ngang), ngay cả khi có mặt, chỉ cần thêm:

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>

Để che giấu scrollbar, nhưng giữ hành vi.

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

Có những hạn chế về điều này.

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

Sử dụng đoạn mã này ..

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

Tôi đã có vấn đề khi tôi đang sử dụng

overflow: none;

Nhưng tôi biết CSS không thực sự thích nó và nó không hoạt động 100% theo cách tôi muốn.

Tuy nhiên, đây là một giải pháp hoàn hảo vì không có nội dung nào của tôi được cho là lớn hơn dự định và điều này đã khắc phục vấn đề tôi gặp phải.

overflow: auto;