css 超出隐藏滚动条_CSS元素超出部分滚动，并隐藏滚动条【转】

利用 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;

}

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好

你好 你好