programing

HTML 가로 스크롤 막대는 숨기지만 세로 스크롤 막대는 숨기기

i4 2023. 8. 19. 09:46
반응형

HTML 가로 스크롤 막대는 숨기지만 세로 스크롤 막대는 숨기기

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

저는 CSS2를 사용하여 가로 스크롤바가 아닌 세로 스크롤바를 표시하는 방법이 없다는 것을 알고 있습니다.가로 스크롤 막대를 숨기기 위해 자바스크립트로 할 수 있는 일이 있습니까?

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

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

CSS를 사용합니다.자바스크립트보다 쉽고 빠릅니다.

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

이 코드를 추가하여 수평 스크롤 막대를 완전히 비활성화합니다.

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

사용.wrap=virtualHTML 양식 상자에서 상자 하단의 수평 스크롤 막대를 제거합니다.

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

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

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

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

enter image description here

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

<div style="width:100px;height:100px;overflow-x:hidden;overflow-y:auto;background-color:#000000">
.combobox_selector ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border:1px solid #CCC;
    height: 200px;
    overflow: auto;
    overflow-x: hidden;
}

200인치 스크롤 다운 크기를 설정합니다.overflow-x수평 스크롤 막대를 숨깁니다.

나를 위한:

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

물론 화살표를 제거합니다.

당신은 그냥 할 수 있습니다:

overflow-x:hidden;
overflow-y:auto

언급URL : https://stackoverflow.com/questions/2594389/hide-html-horizontal-but-not-vertical-scrollbar

반응형