728x90
반응형
질문 : CSS를 사용하여 div를 세로로 스크롤 가능하게 만들기
<div id="" style="overflow:scroll; height:400px;">
사용자가 가로 및 세로로 스크롤 할 수 div
를 제공합니다. div가 세로로만 스크롤되도록 변경하려면 어떻게해야합니까?
답변
잘못된 속성을 사용하는 것 외에는 그것을 덮었습니다. overflow
, overflow-x
또는 overflow-y
속성으로 트리거 될 수 있으며 visible
, hidden
, scroll
, auto
또는 inherit
중 하나로 설정할 수 있습니다. 현재 다음 두 가지를보고 있습니다.
auto
이 값은 상자의 너비와 높이를 나타냅니다. 정의 된 경우 상자가 해당 경계를 넘어 확장되지 않습니다. 대신 (콘텐츠가 해당 경계를 초과하는 경우) 길이를 초과하는 경계 (또는 둘 다)에 대한 스크롤 막대를 만듭니다.scroll
이 값 은 내용이 경계 설정을 초과하지 않더라도 스크롤바를 강제합니다. 콘텐츠를 스크롤 할 필요가 없으면 막대가 "사용 안 함"또는 비대화 형으로 표시됩니다.
항상 수직 스크롤바를 표시하려면 :
overflow-y: scroll
사용해야합니다. 이 힘은 스크롤바가 필요 여부를 수직 축에 표시합니다. 실제로 컨텍스트를 스크롤 할 수없는 경우 "비활성화 된"스크롤바로 나타납니다.
상자를 스크롤 할 수있는 경우에만 스크롤바를 표시하려는 경우 :
overflow: auto
. 콘텐츠가 현재 줄에 맞지 않을 때 기본적으로 다음 줄로 나뉘 기 때문에 가로 스크롤 막대가 생성되지 않습니다 (단어 줄 바꿈이 비활성화 된 요소에 있지 않는 한). 세로 막대의 경우 콘텐츠를 지정한 높이까지 확장 할 수 있습니다. 이 높이를 초과하면 나머지 콘텐츠를보기 위해 세로 스크롤바가 표시되지만 높이를 초과하지 않으면 스크롤바가 표시되지 않습니다.
출처 : https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
JavaScript에서 현재 날짜를 얻는 방법 (0) | 2021.08.25 |
---|---|
HTML 태그 <div>와 <span>의 차이점 (0) | 2021.08.25 |
HTML 페이지에서 스크롤 막대 숨기기 (0) | 2021.08.23 |
이미지 또는 범위 태그를 사용하지 않고 CSS를 통해 UL / LI html 목록에서 글 머리 기호 색상을 설정하는 방법 (0) | 2021.08.23 |
JavaScript로 두 날짜 비교 (0) | 2021.08.23 |