디브에서 가로 스크롤 바를 제거하려면 어떻게 해야 합니까?

디브에서 가로 스크롤 바를 제거하려면 어떻게 해야 합니까?

때.overflow: scroll는 가로 세로 바를 . , .

디브에서 가로 스크롤 바를 제거하는 방법이 있습니까?

overflow-x: hidden;

쓰는 거 overflow-x: hidden;

코드는 다음과 같습니다.

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

CSS

overflow-y: scroll;

jsFiddle에서 보세요.

다음을 제거할 경우 주의하십시오.-yoverflow-y됩니다.y,됩니다.

와 함께overflow-y: scroll 바는 항상 ..필요한 경우에만 y 스크롤 막대를 표시하려면 다음과 같은 작업을 수행합니다.

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

바를 바를 하여 한 div 의display: none;

한 가지 주의할 점은 Mozilla에 사용할 수 있는 옵션이 없기 때문에 웹킷 기반 브라우저(Chrome과 같은)에서만 작동한다는 것입니다.

바를 합니다를 합니다.::-webkit-scrollbar

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

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

이 코드를 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;
}

스크롤을 허용하면서 수평 스크롤 막대를 제거합니다.

&::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&::-webkit-scrollbar-thumb:horizontal {
  display: none;
}

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

html, body {
    overflow-x: hidden;
}

가로로 넘쳐나는 것이 없다면 그냥 사용해도 좋습니다.

overflow: auto;

필요할 때만 스크롤 바가 표시됩니다.

CSS 오버플로 속성 참조

overflow-x:hidden;

그러나 웹 사이트에 있는 내용이 표시되지 않을 수도 있습니다.따라서 요소를 검사하고 디브 또는 섹션의 너비를 확인하고 추가로 넣었을 수 있는 오른쪽/왼쪽 여백을 제거하는 것이 가장 좋습니다.훨씬 더 나은 솔루션

용도:

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

스크롤 막대 숨기기

1단계:

go to any browser for example Google Chrome
click on keyboard ctrl+Shift+i inspect use open tools Developer

2단계:

Focused mouse on the div and change style div use try this:

 overflow: hidden; /* Hide scrollbars */

이제 프로젝트에 파일 . css을 추가하고 파일을 포함시키러 갑니다.

마지막으로 overflow-x 속성이 도움이 되지 않는 이 문제를 접했고 진부한 해결책이라고 생각합니다. 잠재적으로 크고 페이지의 다른 요소보다 크기가 큰 요소를 검사하고 확인하는 것을 권장합니다.일부 컨테이너의 너비를 확인하는 것을 잊지 마십시오. 보기(vw) 속성에 따라 너비가 컨테이너를 제한할 수 있으며 매우 실용적입니다.행운을 빌어요.

사용할 때 문제가 있었습니다.

overflow: none;

하지만 CSS가 별로 마음에 들지 않는다는 것을 알고 있었고 원하는 방식으로는 100% 작동하지 않았습니다.

하지만 제 콘텐츠 중 어느 것도 의도한 것보다 커야 하는 것이 없고, 이것이 제가 가졌던 문제를 해결해 주었기 때문에 이것은 완벽한 해결책입니다.

overflow: auto;

언급URL : https://stackoverflow.com/questions/4405954/how-do-i-remove-the-horizontal-scrollbar-in-a-div