HTML 가로 세로 스크롤 막대가 아닌 숨기기


279

고정 너비이지만 가변 높이의 HTML 텍스트 영역이 있습니다. overflow:scroll세로 스크롤 막대 를 설정 하고 표시하고 싶지만 가로 스크롤 막대를 표시하고 싶습니다 . overflow:auto상황에 맞는 다른 것들로 인해 사용할 수 없습니다 .

CSS2를 사용하여 세로 스크롤 막대는 표시하지 않는 방법이 없다는 것을 알고 있습니다. 가로 스크롤 막대를 숨기기 위해 JavaScript로 할 수있는 작업이 있습니까?


3
아니요, CSS2를 사용 overflow:scroll;하면 하나의 막대를 표시하고 다른 막대는 표시 할 수 없습니다. 내재 된 overflow:scroll; javascript는 CSS가 허용하는 기능 만 수행 할 수 있습니다. 그러나 내 생각에는 overflow : auto를 사용할 있다는 것 입니다. 어떻게 알지 못합니다. "상황에 맞는 다른 것들"에 대해 자세히 설명 하시겠습니까?
tloflin

답변:


575

다음과 같이 CSS를 사용할 수 있습니다.

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

2
CSS3 로보 고 있으며 Firefox에서 테스트 할 때 작동하지 않습니다. 또한이 서비스는 하루 종일 IE 전용 속성으로 제공됩니다.
William Jones

@wiliamjones-이것은 firefox에서 작동합니다 ... 예제 페이지가 있습니까? 작동하지 않는 다른 레이아웃 이유 일 수 있습니다.
Nick Craver

@william-firefox에서 테스트하고 작동하는 완전한 예가 있습니다 :) jsfiddle.net/qpZ8k
Nick Craver

맞습니다. Firefox에서 작동합니다.이 속성과 호환되지 않는 프로토 타입 자바 스크립트 라이브러리이므로 해결하기 쉽습니다. 이 속성은 일반적으로 브라우저에서 신뢰할 수 있습니까?
William Jones

@williamjones-예, 일반적으로 이러한 경우가 있습니다. 브라우저에서 구현 한 다음 나중에 생각할 때 표준입니다.
Nick Craver

30

CSS를 사용하십시오. 자바 스크립트보다 쉽고 빠릅니다.

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

22

이 코드를 추가하여 가로 스크롤 막대를 완전히 비활성화하십시오.

body{
  overflow-x: hidden;
  overflow-y: scroll;
}

9

wrap=virtualHTML 양식 상자에서 사용 하면 상자 하단의 가로 스크롤 막대가 제거됩니다.

  <textarea name= "enquiry" rows="4" cols="30" wrap="virtual"></textarea>

여기 예를 참조 하십시오 : http://jsbin.com/opube3/2 (FF 및 IE에서 테스트 됨)



2
selector{
 overflow-y: scroll;
 overflow-x: hidden;
}

스 니펫 및 jsfiddle 링크를 사용한 작업 예 https://jsfiddle.net/sx8u82xp/3/

여기에 이미지 설명을 입력하십시오

.container{
  height:100vh;
  overflow-y:scroll;
  overflow-x: hidden;
  background:yellow;
}
<div class="container">

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

</div>


1
.combobox_selector ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border:1px solid #CCC;
    height: 200px;
    overflow: auto;
    overflow-x: hidden;
}

200px 스크롤 크기를 설정 overflow-x하고 가로 스크롤 막대를 숨 깁니다.


0

나를 위해 :

.ui-jqgrid .ui-jqgrid-bdiv {
   position: relative;
   margin: 0;
   padding: 0;
   overflow-y: auto;  <------
   overflow-x: hidden; <-----
   text-align: left;
}

물론 화살표를 제거하십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.