一个网站由多个网页组成，设计师在设计网页时，通常会尽量遵循平面设计图进行制作。然而，在实际的网站开发过程中，难免会遇到一些细节问题，其中较为常见的就是网页滚动条的异常显示。今天，马氪软件将为大家介绍几种去除网页滚动条的方法。
有时，滚动条的出现并非设计师所愿——可能是本不该出现时却多出来，或是影响页面美观度。那么，我们该如何处理呢？
1. 去掉最右侧的垂直滚动条
如果希望隐藏页面右侧的纵向滚动条，可以在 </body> 标签前添加如下代码：
<body style="overflow:-Scroll;overflow-y:hidden">
2. 隐藏横向滚动条
当页面意外出现横向滚动条时，会严重影响浏览体验。此时可以在 </body> 前添加以下代码：
<body style="overflow:-Scroll;overflow-x:hidden">
3. 隐藏横向滚动条，保留纵向滚动条
若只想隐藏横向滚动条，同时保留纵向滚动条以便内容滚动，可使用：
<body style="overflow-x:hidden;overflow-y:scroll">
4. 完全隐藏所有滚动条
如果需要彻底隐藏页面所有滚动条，可使用以下任一方式：
<body style="overflow:hidden">
或
<body scroll="no">
5. 针对火狐浏览器的兼容处理
在火狐浏览器中，有时即使设置了滚动条隐藏，底部仍可能出现滚动条区域。此时可通过以下CSS进行兼容：
html { overflow:-moz-scrollbars-vertical; }
6. 框架页中的滚动条处理
如果是通过框架（iframe等）嵌入的页面，使用上述方法仍无法去除滚动条时，可以在被嵌入的页面中加入以下样式：
隐藏横向滚动条：
<style>
html { overflow-x:hidden; }
</style>
隐藏纵向滚动条：
<style>
html { overflow-y:hidden; }
</style>
附：overflow 属性说明
overflow-y 与 overflow-x 属性用于控制页面在垂直与水平方向上的滚动条显示，常用取值如下：
visible：不剪切内容，也不添加滚动条
auto：根据内容需要自动剪切并显示滚动条
hidden：超出部分直接隐藏，不显示滚动条
scroll：始终显示滚动条（无论内容是否溢出）
掌握这些属性的使用，可以有效控制网页滚动条的显示状态，使页面布局更加整洁美观。
关于网页滚动条的其他处理方式，此处不再一一赘述。如果你在实际开发中遇到相关问题，欢迎随时联系无锡马氪软件，我们是一家专业的网站建设与软件开发公司，竭诚为您服务。
做网站时网页出现滚动条如何去除？
马氪软件
2016-11-15 20:29
版权声明
如未有特别说明和标注来源和版权，本站内容均为马氪软件原创发布，未经允许不得转载。
免责声明
以上内容部分(包含图片、文字)来源于网络，如有侵权，请及时与本站联系（xwx-jacky@foxmail.com）。如由互联网用户自发上传的内容（标注：来源网络），本站不拥有所有权，亦不承认法律责任。
