目的: 实现部分区域内容滚动, 但不产生滚动条
方法一: 利用css3属性, -webkit-scrollbar ( 不兼容 火狐 和 IE ) 仍然有滚动条
<style>
#box-01 {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
}
#box-01::-webkit-scrollbar {
display: none;
}
</style>
<div id="box-01">
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
方法二: 嵌套盒子, 设置子盒子的滚动条超出父盒子, 隐藏掉即可
优点: 兼容所有浏览器
<style>
/* 父容器设置宽度, 并超出部分不显示 */
#box-02 {
width: 300px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
}
#box-02>div {
/* 子容器比父容器的宽度多 17 px, 正好是滚动条的默认宽度 */
width: 317px;
height: 300px;
line-height: 30px;
text-align: center;
overflow-y: scroll;
}
</style>
<div id="box-02">
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
</div>
参考文章:
