方法一 这种其实是设置了滚动条 但是将它隐藏了起来
html
<div id="parent">
<div id="child">
11111
22222
33333
44444
55555
66666
77777
88888
99999
11111
22222
</div>
</div>
css样式
#parent {
width: 200px;
height:50px;
overflow: hidden;
}
#child {
width: 200px;
height:50px;
overflow-y: scroll;
padding-left: 20px;
}
方法二 加一句
::-webkit-scrollbar{
display:none;
}
但是这个方法不兼容ie浏览器
话说这一句可以单独写在某个样式里啊!!以前以为只能定义在全局上。
方法三 这个方法需要外面套三层 少一层好像也不行,应该是通过设置一样的长宽把滚动条覆盖掉吧
所以存在着一个问题……如果改变位置的话会非常奇怪,比如设置top:10 因为父元素就是100 相当于在高度上-10 整个div会向下移动 但是同时缩小了。因为只要超过grandfather的高度就会被隐藏啊。
<div id="grandfather">
<div id="parent">
<div id="child">
11111
22222
33333
44444
55555
66666
77777
88888
99999
11111
22222
</div>
</div>
</div>
css样式
#child,#grandfather{
width: 140px;
height: 100px;
}
#grandfather{
position: relative;
overflow: hidden;
}
#parent{
position: absolute; left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
所以如果非要移动位置 只能一起往下
parent向下移动10 相对应的grandfather那个也要加高10 看起来才对