HTML 스크롤 상자는 상자의 내용이 상자 크기보다 클 경우 스크롤 막대를 오른쪽과 아래쪽에 추가하는 상자입니다. 즉, 약 50 단어에 맞는 상자가 있고 200 단어의 텍스트가있는 경우 HTML 스크롤 상자는 추가 150 단어를 볼 수 있도록 스크롤 막대를 올립니다. 표준 HTML에서는 단순히 상자 외부에 추가 텍스트를 넣을뿐입니다.
HTML 스크롤을 만드는 것은 매우 쉽습니다. 스크롤하려는 요소의 너비와 높이를 설정 한 다음 CSS overflow 속성을 사용하여 스크롤 방법을 설정하면됩니다.
추가 텍스트로 무엇을해야합니까?
레이아웃 공간에 텍스트보다 많은 텍스트가있는 경우 몇 가지 옵션이 있습니다.
- 텍스트가 더 짧고 잘 맞도록 텍스트를 다시 작성하십시오.
- 텍스트가 범위를 넘어서도록 허용하고 레이아웃이 그것을 지원하기 위해 유연 해지기를 바랍니다.
- 오버플로되는 텍스트를 잘라냅니다.
- 추가 텍스트를 표시하기 위해 스크롤 할 스크롤 막대 (일반적으로 텍스트의 세로)를 추가하십시오.
가장 좋은 옵션은 일반적으로 마지막 옵션 인 스크롤하는 텍스트 상자를 만드는 것입니다. 그런 다음 추가 텍스트를 읽을 수는 있지만 디자인이 손상되지는 않습니다.
HTML과 CSS는 다음과 같습니다.
그만큼
오버플로 : 자동;
div에 경계선이 오버 플로우되지 않도록 스크롤 막대를 추가하도록 브라우저에 지시합니다. 그러나 이것이 작동하려면 오버 플로우 할 경계가 있도록 div에 설정된 너비 및 높이 스타일 속성도 필요합니다.
overflow : auto를 변경하여 텍스트를자를 수도 있습니다. 오버플로 : 숨김; 오버플로 속성을 생략하면 텍스트가 div의 경계 위로 넘치게됩니다.
단순한 텍스트 이상으로 스크롤 막대를 추가 할 수 있습니다.
더 작은 공간에 표시하려는 큰 이미지가있는 경우 텍스트와 같은 방법으로 스크롤 막대를 추가 할 수 있습니다.
이 예에서 400x509 이미지는 300x300 단락 안에 있습니다. 긴 정보 표는 매우 빨리 읽을 수 없지만 제한된 크기의 div 안에 넣은 다음 오버플로 속성을 추가하면 페이지에서 극단적 인 공간을 차지하지 않는 많은 양의 데이터로 표를 생성 할 수 있습니다 . 가장 쉬운 방법은 이미지와 텍스트를 사용하는 것과 같습니다. div를 테이블 주위에 추가하고 div의 너비와 높이를 설정 한 다음 overflow 속성을 추가하면됩니다. 브라우저에서 스크롤 막대의 크롬이 테이블과 겹치는 것으로 가정하기 때문에 가로 스크롤 막대가 일반적으로 나타납니다. 테이블 및 기타의 너비를 변경하지 못하도록 수정하는 방법은 여러 가지가 있습니다. 하지만 내가 좋아하는 것은 단순히 CSS 3 속성으로 가로 스크롤을 해제하는 것입니다. overflow-x . 추가 만하면됩니다. overflow-x : 숨김; div로 이동하면 가로 스크롤 막대가 제거됩니다. 사라질 내용이있을 수 있으니 테스트 해보십시오.
테이블은 스크롤 막대에서 이익을 얻을 수 있습니다.
이름 전화 제니퍼 502-5366
