집 >웹 프론트엔드 >HTML 튜토리얼 >DIV 스크롤바를 사용하는 방법

DIV 스크롤바를 사용하는 방법

php中世界最好的语言원래의: 2017-11-20 15:55:401982검색

DIV의 스크롤바는 다양한 곳에서 사용될 수 있습니다. 오늘은 CSS를 사용하여 DIV의 스크롤바를 조작하는 방법을 알려드리겠습니다. DIV 스크롤 막대를 숨기고 표시하는 방법

우선 CSS의 기본 지식

overflow-y:scroll; 항상 세로 스크롤 막대를 표시합니다

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

이해하세요: Overflow-y manual http://www.divcss5.com/shouce/c_overflowy.shtml

overflow-x:scroll; 항상 수평 스크롤 막대를 표시합니다

overflow-x: visible: 내용을 자르지 않습니다 가로 스크롤 막대를 추가하지 마세요

알아보기: Overflow-x 매뉴얼 http://www.divcss5.com/shouce/c_overflowx.shtml

css Overflow에 대해 알아보기

div set 스크롤 bar example

DIVCSS5 첫 번째를 페어링하여 하나의 DIV 객체에 대한 div 너비, div 높이 및 div 테두리 스타일을 설정하고 DIV 상자에 데모 텍스트 콘텐츠를 추가하고 두 번째 상자에 대해 동일한 CSS 스타일 및 상자 텍스트 콘텐츠를 설정합니다. 효과를 관찰하기 위해 수평 및 수직 스크롤 막대를 설정합니다.

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

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

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

효과를 관찰하기 위해 두 DIV 상자에 동일한 CSS 스타일과 동일한 텍스트 내용을 설정했습니다. 두 번째 상자에는 스크롤 막대 스타일이 설정되어 있어 오버플로가 없습니다. 세로 오른쪽(Y)에는 풀다운 및 풀업 스크롤 막대 스타일이 있지만 가로 하단(X)에는 스크롤 막대 효과가 있습니다. DIV의 너비를 확장할 수 없습니다. DIV의 너비보다 큰 그림인 경우 화면 하단(X)에 스크롤바 효과가 나타납니다. 수평 방향.

CSS div 스크롤 막대를 숨기는 방법은 무엇입니까?

DIV에는 기본적으로 스크롤 막대가 없습니다. 스크롤 막대 스타일을 추가하면 제거한 후 스크롤 막대가 자연스럽게 사라집니다.

frame
iframe에 나타나는 스크롤 막대인 경우 y:visible 또는 Overflow-y:hidden에서 스크롤 막대를 가로로 숨기려면 스크롤 막대를 숨길 수 있습니다. 위 내용은 DIV 스크롤바를 숨기고 표시하는 방법입니다. 관심 있는 친구들이 직접 할 수 있습니다.

DIV 스크롤바를 사용하는 방법

관련 기사