html如何去掉滚动条-猿码集

HTML如何去掉滚动条？

当我们在编写网页时，有时候需要去掉网页中的滚动条，以便更好地展示页面内容。在HTML中，有多种去掉滚动条的方法，本文将详细介绍这些方法。

1. 使用CSS样式表

在html中，我们可以使用CSS样式表去掉滚动条。具体方法是：使用CSS中的overflow属性，将其设置为hidden即可。在网页中，我们将外部的CSS样式表链接到HTML页面中，并将对象的overflow属性设置为hidden，具体代码如下：


    <head>
      <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
      <div class="noScrollBar"><p>此处是页面内容</p></div>
    </body>

那么我们其中定义的CSS文件中的代码是：


    .noScrollBar{
        overflow: hidden;
    }

使用这种方法可以很好地去除指定对象的滚动条，但需要保证对象所包含的内容不能超出对象的范围，否则内容将无法显示。

2. 使用iframe框架

在页面中使用iframe框架也可以达到去除滚动条的效果。具体实现方法如下：


    <iframe src="noScrollBar.html" frameborder="0" scrolling="no"></iframe>

这样，我们在noScrollBar.html中可以去除滚动条，具体代码如下：


    <html>
    <head>
        <style>
             body{
                overflow:hidden;
             }
        </style>
    </head>
    <body>
        <p>此处是内容</p>
    </body>
    </html>

当然，在使用iframe框架时，需要确保所嵌套的页面中没有超出框架边界的内容，否则依然会出现滚动条。

3. 使用JavaScript代码

在JavaScript中，我们可以使用Dom对象来动态地改变HTML中的元素。通过修改元素的height或者width属性，我们可以动态地改变页面的大小，以达到去除滚动条的效果。

具体实现方法如下：


    <body onload="set()">
        <div id="content">
            <p>此处是内容</p>
        </div>
    </body>
    <script type="text/javascript">
        function set(){
            document.body.style.overflow="hidden";
            document.body.style.width=window.screen.width+"px";
            document.body.style.height=window.screen.height+"px";
        }
    </script>

通过执行JS中定义的set函数，我们可以动态的设置body元素的width、height和overflow属性，从而达到去除滚动条的效果。

总结

本文介绍了三种去除滚动条的方法，分别是使用CSS样式表、使用iframe框架和使用JavaScript代码。这三种方法各有优缺点，需要具体问题具体分析。但无论哪种方法，我们都需要保证页面内容不会超出去除滚动条的容器对象，否则还是会出现滚动条。

html如何去掉滚动条