CSS를 사용하여 텍스트가 스크롤 표시를 초과할 때 스크롤 막대를 숨기는 두 가지 방법(코드 예)
- 青灯夜游원래의
- 2018-10-27 15:19:518190검색
부분 너머의 텍스트 스크롤 표시를 구현하고 스크롤 막대를 숨기는 방법은 무엇입니까? 이 기사에서는 CSS를 사용하여 텍스트가 제한을 초과한 후 스크롤 표시 효과를 얻는 방법과 스크롤 막대를 숨기는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 텍스트가 한도를 초과한 후 CSS에서 스크롤 표시를 구현하려면 css 오버플로 속성을 사용하겠습니다. CSS 오버플로 속성은 스크롤 형식으로 사용할 수 있습니다. 텍스트가 한도를 초과하면 내용이 잘려서 표시됩니다. 간단한 코드 예시를 통해 CSS 오버플로 속성의 스크롤 막대를 숨기는 방법을 살펴보겠습니다.
방법 1: 내부 및 외부 중첩을 사용하여 시뮬레이션
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动显示，滚动条隐藏</title>
</head>
<style type="text/css">
#box {
/* 父容器设置宽度, 并超出部分不显示 */
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid red;
}
#box > div {
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
width: 317px;
height: 200px;
line-height: 30px;
overflow-y: scroll;
padding: 5px;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动,滚动条隐藏 -->
<div id="box">
<div>
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。
</div>
</div>
</body>
</html>Rendering:
이 방법은 모든 브라우저와 호환되지만 사용하기가 더 번거롭습니다. 스크롤 막대에 대한 스타일을 선언할 수 없습니다
방법 2: CSS 3의 새로운 기능 활용 - webkit-scrollbar,
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动显示，滚动条隐藏</title>
</head>
<style type="text/css">
#box {
width: 300px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
margin: 100px auto;
border: 1px solid red;
}
#box::-webkit-scrollbar {
display: none;
}
</style>
<body>
<!-- 兼容大部分浏览器，超出部分滚动,滚动条隐藏 -->
<div id="box">
<div>
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。
</div>
</div>
</body>
</html>Rendering:
이 방법을 사용하세요 더 편리하지만 Firefox 및 IE와 호환되지 않습니다.
요약: 위의 두 가지 방법은 텍스트가 한계를 초과한 후 텍스트의 스크롤 표시를 구현하고 스크롤 막대를 숨기는 방법으로 각각 고유한 장점과 단점이 있습니다. 필요에 따라 사용하도록 선택하세요. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , HTML 동영상 튜토리얼 , bootstrap 동영상 튜토리얼 을 방문하세요.
위 내용은 CSS를 사용하여 텍스트가 스크롤 표시를 초과할 때 스크롤 막대를 숨기는 두 가지 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!