阅读原文

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章 https://0x9.me/KMrv3

方法1：

1
html { overflow-y: scroll; }

原理：强制显示ie的垂直滚动条，而忽略水平滚动条
优点：完全解决了这个问题, 允许你保持完整的XHTML doctype
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条

方法2： (推荐)

1
html { overflow-x: hidden; overflow-y: auto; }

原理：隐藏横向滚动，垂直滚动根据内容自适应
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候
屏幕以外的内容会因为用户无法水平滚动，而看不到

方法3：

1
body { margin-right: -15px; margin-bottom: -15px; }

原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象
优点：在视觉上解决了这个问题.，垂直滚动根据内容自适应
缺点：由于”人为创建”了15px的外边距(margin), 所以无法使用该填充过的屏幕区域

也可以定义滚动条的样式

1
2
3
4
5
6
7
8
9
10
*{
    scrollbar-3dlight-color:#D4D0C8;    /*- 最外左 -*/
    scrollbar-highlight-color:#fff;     /*- 左二 -*/
    scrollbar-face-color:#E4E4E4;       /*- 面子 -*/
    scrollbar-arrow-color:#666;         /*- 箭头 -*/
    scrollbar-shadow-color:#808080;     /*- 右二 -*/
    scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
    scrollbar-base-color:#D7DCE0;       /*- 基色 -*/
    scrollbar-track-color:#;            /*- 滑道 -*/
}