div에서 가로 스크롤 막대를 어떻게 제거합니까?

을 설정 overflow: scroll하면 가로 및 세로 스크롤 막대가 나타납니다.

div에서 가로 스크롤 막대를 제거하는 방법이 있습니까?

overflow-x: hidden;

쓰는 것을 잊지 마세요 overflow-x: hidden;

코드는 다음과 같아야합니다.

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

를 사용 overflow-y: scroll하면 세로 스크롤 막대가 필요하지 않더라도 항상 존재합니다. y 스크롤 막대가 필요할 때만 표시되도록하려면 다음과 같이 작동합니다.

.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;

한 가지주의해야 할 점은 Mozilla와 같은 옵션이 없기 때문에 Chrome과 같은 WebKit 기반 브라우저에서만 작동한다는 것입니다.

스크롤바를 선택하려면 ::-webkit-scrollbar

따라서 최종 코드는 다음과 같습니다.

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

가로 스크롤 막대를 제거하려면 다음 코드를 사용하십시오. 100 % 효과가 있습니다.

html, body {
    overflow-x: hidden;
}

가로로 넘친 것이 없다면 바로 사용할 수도 있습니다.

overflow: auto;

필요할 때만 스크롤바를 표시합니다.

CSS 오버플로 속성을 참조하십시오 .

사용하다:

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;