使用overflow实现能滚动，不出现滚动条

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的设置