Question

当正文为空时，不需要滚动条，但如果正文中包含内容，则滚动条是必需的。如果没有任何JavaScript库，比如jQuery，我怎么知道滚动条是否存在？

我试图动态更改我的页面。问题是我必须使用滚动条调整我的布局。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
    </title>
    <style type="text/css">
    body
    { 
        margin:0px;
        padding:0px;
        border:0px;
    /*    border-color:#FEFEFE;*/
    /*    background-image:url(bg.png);*/
        background-repeat: repeat;
        display:block;
        z-index:-9999;
        width:100%;
        height:100%;
        left:0px;
        top:0px;
    }
    div
    {
        background-color:#a0a0a0;
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        display:block;
        z-index:-8888;
    }
    </style>
    </head>

    <body id="body">
    <div id="bg">
    <span id="s1">
    test
    </span>
    </div>
    </body>
    <script type="text/javascript">
        (function (d) {
            setInterval(function () {
                w = d.body.clientWidth;
                h = window.innerHeight;
                document.title = w + " : " + h;
            }, 1);
        })(document)
    </script>
    </html>

Answer 1

你不需要处理任何事情。只需将css overflow属性设置为元素，当内容大小大于容器大小时，将显示滚动条：

<强> CSS

div {
 overflow: auto;
}

Answer 2

只能使用JavaScript检测滚动条的存在。但是在您的情况下，您可以只使用CSS并让浏览器确定是否需要滚动条。这可以通过控制CSS＆＃34;溢出＆＃34;属性;

html, body, .myClass
{
    Overflow:scroll;    #example scroll always on
    Overflow:auto;      #example browser decides if needed
    Overflow:hidden;    #example hide the additional content
}

检测滚动条的存在

2 个答案: