滚动条设置
滚动条出现的条件
chrom浏览器的padding-bottom不缺失,其他都会缺失
overflow:auto出现滚动条容易破坏布局、水平居中跳动问题
水平居中 有无滚动栏
实际开发常用的滚动条属性
滚动条是会占据容器尺寸,原本布局可能会受到滚动条的影响
overflow的padding-bottom只在chrome浏览器下会出现,其他浏览器没有
HTML元素的滚动条的等效css代码
无论什么浏览器,默认滚动条来自<html>标签而不是<body>标签
去除页面默认滚动条只需
html{overflow:hidden}
ios原生滚动回调效果
自定义滚动条
修复由于滚动条的出现,导致居中元素左右跳动的方案
滚动条默认像素
计算高度时,有可能因为padding-bottom缺失出问题,这是浏览器兼容导致的
获取浏览器高度
只给html设置overflow:hidde,不需要给body也设置
滚动条宽度都是17px
自定义滚动条
1. 滚动条出现:
overflow: auto/scroll;
2.滚动条默认来自html,而不是body
3.html中overflow默认值
ie7: overflow-y: scroll;
ie8+: overflow: auto;
4.滚动条高度:
5.overflow的padding-bottom缺失现象 => 不一样的scrollHeight
chrome存在pading-bottom,其他缺失
6. 滚动条的宽度机制
7.滚动条导致布局问题
8.水平居中跳动问题
9.自定义滚动条
10. ios原生滚动回调
默认滚动条来自 <html>
padding-bottom 可能缺失
滚动条宽度 17px
padding-left: calc(100vw - 100%); 方法的作用
Overflow与滚动条
IOS原生过的回调效果;-webkit-overflow-scrolling:touch;
对于IE浏览器 建议使用自定义滚动条插件!
常用自定义滚动条属性!