overflow：
- overflow是漫出; 溢出; 的意思
- 在css中用来对超出容器的部分做裁剪
- overflow-x是对横向方向的裁剪 overflow-y是对纵向方向的裁剪
/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;
/* 规定从父元素继承overflow属性的值 */
overflow: inherit;
实现一个不出现滚动条，但能滚动的方法
- 第一种
使用伪类 ::webkit-scrollbar {
display: none;
}
将滚动条条隐藏
关于scrollbar，可以设置伪类如下：
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
但是火狐浏览器不支持这个
`::-webkit-scrollbar` 仅仅在支持[WebKit]的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.
- 第二种
在外层套一个容器使用overflow:hidden; 在里层的容器设置overflow：auto;
同时设置宽度比外层多17px (17px为滚动条的宽度)
#container{
width:100%;
height:100%;
overflow:hidden;
}
#content {
width: calc(100% + 17px);
height: calc(100% + 17px);
overflow: auto;
}
这样就既可以滚动，又不会出现滚动条
滚动条出现的原因是由于里层的容器宽高超出了外层的容器， 在html中，外层的滚动条是只能通过外层来隐藏或者更上层来隐藏， 如 body层出现的滚动条，不能设置里面的box overflow：hidden；来隐藏，只能设置body overflow：hidden或者html overflow:hidden；来隐藏
- document.documentElement.style.overflowX = 'hidden'; 是对html的设置
