code

div 오버플로에서 세로 스크롤 막대 비활성화 : 자동

codestyles 2020. 8. 17. 08:59
반응형

div 오버플로에서 세로 스크롤 막대 비활성화 : 자동


overflow : auto (또는 scroll)를 사용할 때 수평 스크롤 막대 만 허용 할 수 있습니까?


다음 두 CSS 속성을 사용하여 스크롤바를 숨길 수 있습니다.

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

당신은 만 사용해야합니다

overflow-y:hidden; -세로 스크롤을 숨기는 데 사용합니다.

overflow-x:auto; -수평 스크롤을 보여줍니다.

Luke는 둘 다 숨겨진 것으로 언급했습니다. 그래서 저는 이것을 따로주었습니다.


오버플로 : 자동;
overflow-y : 숨김;

IE8의 경우 : -ms-overflow-y : 숨김;

또는 기타 :

숨기기 X하려면 :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Y를 숨기려면 :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

Gecko (NS6 +, Mozilla 등)와 IE4 +에서 동시에 동일한 작업을 수행하려면 다음과 같이 트릭을 수행해야한다고 생각합니다.

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

이것은 전체 본문 태그에 적용됩니다. 관련 CSS로 업데이트하고이 속성을 적용하십시오.


다음을 추가하십시오.

body{
overflow-y:hidden;
}

이 규칙은 모든 브라우저와 호환됩니다.

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

참고 URL : https://stackoverflow.com/questions/7646538/disable-vertical-scroll-bar-on-div-overflow-auto

반응형