프로그래밍 언어/HTML,CSS,JS

CSS를 사용하여 div를 세로로 스크롤 가능하게 만들기

Rateye 2021. 8. 23. 10:47
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
반응형