1.滚动条出现条件
overflow:auto/scroll-
<html>/<textarea>等元素自带
- 内容尺寸超出容器
2.浏览器滚动条
- 无论什么浏览器，默认滚动条均来自
<html>而不是<body>
- 滚动条效果类似：（！！！只是效果类似）
- IE7默认：
html { overflow:scroll; }
- IE8+等默认：
html { overflow:auto }
3.单页布局去除滚动条
html { overflow: hidden; }
4.滚动高度与JS
- Chrome：
document.body.scrollTop
- 其他浏览器：
document.documentElement.scrollTop
- 兼容写法：
var st = document.documentElement.scrollTop || document.body.scrollTop
5.overflow的padding-bottom缺失现象
<!-- 页面结构如下，内部尺寸超出外部容器，同时外部容器的上下内边距为100px -->
<!-- chrome下的上下内边距都可以正常显示，但非chrome下的内边距都不见了 -->
<!-- 这样的现象容易导致获取元素内容高度scrollHeight时出错 -->
<style type="text/css">
.box {
width: 400px;
height: 100px;
border: 1px solid red;
overflow: auto;
padding: 100px 0;
}
.content {
width: 100%;
height: 300px;
background-color: #ccc;
}
</style>
<div class="box">
<div class="content">content</div>
</div>
chrome-paddingBottom.PNG
ie11-paddingBottom.PNG
6.滚动条的宽度机制
7.滚动条样式
<!-- 效果如下图 -->
<style type="text/css">
.box {
padding: 100px 0;
width: 400px;
height: 300px;
overflow: scroll;
border: 1px solid red;
}
.content {
width: 100%;
height: 900px;
background-color: #ccc;
}
::-webkit-scrollbar { /* 血槽宽度 */
width: 10px;
height: 8px;
}
::-webkit-scrollbar-thumb { /* 拖动条 */
background-color: #B0ADC8;
border-radius: 6px;
}
::-webkit-scrollbar-track { /* 背景槽 */
background-color: #eee;
border-radius: 6px;
}
</style>
<div class="box">
<div class="content">content</div>
</div>
scroll-style.PNG
网友评论