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

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를 지정하지 않고 scroll : // 없음

.your-class {
   overflow: hidden; 
}

가로 스크롤 제거 :

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

세로 스크롤을 제거하십시오.

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

---

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

overflow:auto;

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

http://css-tricks.com/the-css-overflow-property/

---

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

html, body {overflow-x: hidden;}

---

가로 스크롤 막대를 숨기려면 필요한 div의 스크롤 막대를 선택하고 display: none;

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

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

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

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

---

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>

---

사용중인 문제가 발생했습니다

overflow:none;

그러나 CSS가 실제로 마음에 들지 않으며 내가 원하는 방식으로 100 % 작동하지 않는다는 것을 알았습니다.

However this is a perfect solution as none of my content is supposed to be larger than intended and this has fixed the issue i had.

overflow:auto;

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