overflow与滚动条
2018-05-24 本文已影响0人
闪电西兰花
1.滚动条出现条件
overflow:auto/scroll-
<html>/<textarea>等元素自带 - 内容尺寸超出容器
2.浏览器滚动条
- 无论什么浏览器，默认滚动条均来自
<html>而不是<body> - 滚动条效果类似：（！！！只是效果类似）
- IE7默认：
html { overflow:scroll; } - IE8+等默认：
html { overflow:auto }
- IE7默认：
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
