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