方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分隐藏滚动条</title>
</head>
<style type="text/css"> #box { width: 500px; height: 300px; overflow-x: hidden; overflow-y: scroll; line-height: 30px; text-align: center;
} #box::-webkit-scrollbar { display: none;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box"> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br>
</div>
</body>
</html>
方法二, 利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动条</title>
</head>
<style type="text/css"> #box {
/* 父容器设置宽度, 并超出部分不显示 */ width: 500px; height: 300px; overflow: hidden;
} #box > div {
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */ width: 517px; height: 300px; line-height: 30px; text-align: center; overflow-y: scroll;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box">
<div> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br>
</div>
</div>
</body>
</html>