检测滚动条的存在

Detect presence of scrollbar

本文关键字：存在 滚动条 检测      更新时间：2023-09-26

当正文为空时，不需要滚动条，但如果正文内容已满，则滚动条是必需的。我怎么知道滚动条是否存在，没有任何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>

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

.CSS 

div {
 overflow: auto;
}

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

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