html 스크롤바 스타일 설정

php中世界最好的语言원래의: 2017-11-22 13:33:374256검색

DIV에 대한 스크롤 막대를 설정해야 하는 경우 스크롤 막대의 스타일을 가로 또는 세로로 설정해야 할 수 있습니다. 오늘은 overflow-y 및 overflow-x를 사용하여 설정해야 합니다. 이 두 가지 속성에 대해 알려 드리겠습니다.

div의 스크롤 막대를 설정하고 가로 스크롤 막대와 세로 스크롤 막대 스타일을 설정합니다. div 상자 개체의 오른쪽 및 아래쪽 스크롤 막대 효과를 설정하는 데 필요한 CSS 스타일은 Overflow-y 및 Overflow-x입니다. 동시에 CSS 스타일을 사용하여 html 프레임 iframe의 스크롤 막대를 숨길 수도 있습니다.

overflow-y:scroll; 항상 수직 스크롤 막대를 표시합니다.

overflow-y:visible: 내용을 자르지 마세요. 수직 스크롤 막대 추가

div 스크롤 막대 인스턴스 설정

첫 번째 DIV 개체에 대한 div 너비, div 높이 및 div 테두리 스타일을 설정하고 DIV 상자에 데모 텍스트 콘텐츠를 추가하면 두 번째 상자에서 동일한 CSS가 설정됩니다. 스타일, 상자 텍스트 내용은 동일합니다. 가로 및 세로 스크롤 막대를 설정하고 효과를 관찰합니다.

첫 번째 상자 CSS의 이름은 "divcs5-a"이고 두 번째 DIV 상자 스타일 선택기의 이름은 "div-b"입니다.

1. 구체적이고 완전한 HTML 소스 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>div滚动条 在线演示 </title> 
<style> 
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
</style> 
</head> 
<body> 
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
 
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
</body> 
</html>

효과를 관찰하기 위해 두 DIV 상자에 동일한 CSS 스타일과 동일한 텍스트 내용을 설정했습니다. X 및 y(가로 및 세로 스크롤 막대 스타일)는 ".div-b"로 설정됩니다.

참고: 첫 번째 상자 ".div-a"에는 내용이 너무 많아 스크롤 막대 스타일이 넘칩니다. 세로 오른쪽(Y)은 풀다운 및 풀업 스크롤바 스타일이 있지만 가로 하단(X)은 스크롤바 효과가 있지만 왼쪽이나 오른쪽으로 끌 수 없기 때문입니다. 텍스트 내용은 DIV의 너비를 확장할 수 없습니다. DIV 설정 너비보다 큰 그림인 경우 가로 하단(X)에 스크롤 막대 효과가 나타납니다.

html 스크롤바 스타일 설정

관련 기사