如何知道哪个 HTML 元素导致了垂直滚动条答案

【问题标题】：How to Know Which HTML Element is Causing Vertical Scroll Bar如何知道哪个 HTML 元素导致了垂直滚动条
【发布时间】：2013-10-06 10:03:44
【问题描述】：

我正在学习Bootstrap。在入门菜单上，给出的模板很少。我正在玩那个。一个例子是关于固定页脚。我使用了上一个示例中的 nav 并希望使用固定页脚对其进行调整。但是垂直滚动条来了。 我正在寻找导致垂直滚动条的元素。

这里是 HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap, from Twitter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/bootstrap.css" rel="stylesheet">

        <style type="text/css">

            /* Sticky footer styles
            -------------------------------------------------- */

            html,
            body {
                height: 100%;
                /* The html and body elements cannot have any padding or margin. */
            }

            /* Wrapper for page content to push down footer */
            #wrap {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                /* Negative indent footer by it's height */
                margin: 0 auto -60px;
            }

            /* Set the fixed height of the footer here */
            #push,
            #footer {
                height: 60px;
            }
            #footer {
                background-color: #f5f5f5;
            }

            /* Lastly, apply responsive CSS fixes as necessary */
            @media (max-width: 767px) {
                #footer {
                    margin-left: -20px;
                    margin-right: -20px;
                    padding-left: 20px;
                    padding-right: 20px;
                }
            }



            /* Custom page CSS
            -------------------------------------------------- */
            /* Not required for template or sticky footer method. */

            .container {
                width: auto;
                max-width: 680px;
                height: auto;
            }
            .container .credit {
                margin: 20px 0;
            }

            /* Adjust Nav */
            #wrap > .container {
                margin-top: 60px;
            }

        </style>

        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->

        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="ico/favicon.png">

    </head>

    <body>
        <div id="wrap">
            <div class="navbar navbar-inverse navbar-fixed-top" >
                <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">Project name</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                    </div>
                </div>
            </div>

            <div class="container">

                <h1>Bootstrap starter template</h1>
                <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

            </div> <!-- /container -->
            <div id="push"></div>
        </div> <!-- End Wrap -->

        <div id="footer">
            <div class="container">
                <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
            </div>
        </div>


        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="../jquery.js"></script>
        <script src="js-ext/bootstrap-transition.js"></script>
        <script src="js-ext/bootstrap-alert.js"></script>
        <script src="js-ext/bootstrap-modal.js"></script>
        <script src="js-ext/bootstrap-dropdown.js"></script>
        <script src="js-ext/bootstrap-scrollspy.js"></script>
        <script src="js-ext/bootstrap-tab.js"></script>
        <script src="js-ext/bootstrap-tooltip.js"></script>
        <script src="js-ext/bootstrap-popover.js"></script>
        <script src="js-ext/bootstrap-button.js"></script>
        <script src="js-ext/bootstrap-collapse.js"></script>
        <script src="js-ext/bootstrap-carousel.js"></script>
        <script src="js-ext/bootstrap-typeahead.js"></script>

    </body>
</html>

有什么技巧可以在这些情况下知道是哪个元素导致滚动条吗？我之前遇到过类似的问题，我不记得我是否能找到简单的解决方案。

【问题讨论】：

我发现找出这种性质问题的最佳方法是进入检查器并开始删除元素，直到滚动条消失。
@Conqueror 就在 10 分钟前，我也发布了相同的答案。但是谢谢。寻找更多...

标签： html css twitter-bootstrap

【解决方案1】：

添加：

* {
  outline: 1px solid red;
}

然后，当您向下滚动时，您应该会看到一个非常高的框。右键单击它并选择检查元素。这应该会为您提供所需的信息。

【讨论】：

我已经在下面发布了答案，但重新创建了问题来检查这一点。问题出在哪里还不清楚！至少在上面的例子中。

【解决方案2】：

在控制台中粘贴以下内容并滚动。它将在控制台中记录罪魁祸首。

function findScroller(element) {
    element.onscroll = function() { console.log(element)}

    Array.from(element.children).forEach(findScroller);
}

findScroller(document.body);

【讨论】：

【解决方案3】：

Chris Coyier 有一个excellent article，它解释了你需要解决这个问题的一切。

看完这篇文章后，我个人在我的控制台中使用这段代码来找出是哪个元素导致了垂直滚动：

在浏览器中按F12，然后选择console 并将以下代码粘贴到那里并按回车：

var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
    rect = all[i].getBoundingClientRect();
    if (rect.right > docWidth || rect.left < 0){
        console.log(all[i]);
        all[i].style.border = '1px solid red';
    }
}

更新：
如果上述代码不起作用，可能是 iframe 中的一个元素使页面垂直滚动。在这种情况下，您可以使用以下代码检查iframes：

var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
   var frame = frames[i];
   frame = (frame.contentWindow || frame.contentDocument);
   var all = frame.document.getElementsByTagName("*"),rect,
       docWidth = document.documentElement.offsetWidth;
   for (var j =0; j < all.length; j++) {
       rect = all[j].getBoundingClientRect();
       if (rect.right > docWidth || rect.left < 0){
           console.log(all[j]);
           all[j].style.border = '1px solid red';
       }
   }
}

【讨论】：

【解决方案4】：

我会说你应该使用document.scrollingElement。

【讨论】：

这看起来像是要走的路，虽然你需要一个 IE 的后备。 caniuse.com/#feat=document-scrollingelement

【解决方案5】：

好的，我知道如果我将容器从 margin-top 更改为 padding-top 以调整导航，那么问题就解决了。删除 Firebug 中的元素后，我找到了解决方案。所以，快速修复问题解决了，但我的问题仍然悬而未决。

如何知道是哪个元素引起了滚动条？有什么技巧吗？

另外，为什么 margin-top 不起作用，而 padding-top 起作用了？

为了弄清楚我在哪里进行了更改，我添加了修改后的 CSS：

   /* Adjust Nav */
    #wrap > .container {
        padding-top: 60px;

    }

【讨论】：

尝试添加 clear:both;到你的CSS，它会让margin-top工作
@NizamKazi 在哪里？我尝试过 #wrap {} 和 #wrap > .container {}。
将其应用于您打算从顶部开始留出边距的元素。意味着如果您想将上边距应用于 .container，请向其添加 clear:both css 属性。如果它不会干扰您网站的对齐，也可以尝试“float:left”或“float:right”。

【解决方案6】：

我发现它通常是没有最大宽度的图像：100%

【讨论】：

【解决方案7】：

下面的代码可以帮助你找出是哪个元素导致了垂直或水平滚动条。

这将找到该元素并在导致滚动条的元素处创建带有红色：5px 的边框。

在浏览器的开发工具中运行此命令后，检查是否有任何元素具有导致滚动条的“_____target”类。

如果找到该元素，则从html中注释掉该标签并刷新并重试。

/* Parameter should be either horizon OR vertical */
let checktype = 'horizon';



(function(which){
    style();

    var elements = document.querySelectorAll("body *");
    var found = false;

    elements.forEach(element => {
        if( found ) return;
        element.classList.add("_____zerospace");

        var scrollbar = detectScrollbar(element);
        if(!scrollbar[which])
        {
            console.log(element);
            element.classList.add('_____target');
            found = true;
        }
    })

    return;

    function detectScrollbar(target)
    {
        //var div = document.getElementById('container_div_id');
        var element = document.scrollingElement;
        var hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
        var hasVerticalScrollbar = element.scrollHeight > element.clientHeight;

        return {horizon: hasHorizontalScrollbar, vertical: hasVerticalScrollbar};
    }

    function style()
    {
        var style = document.createElement('style');
        style.innerHTML = '._____zerospace { padding:0 !important; margin:0 !important } ._____target{border: solid 5px red}';

        document.head.appendChild(style);

    }

})(checktype)

【讨论】：

【解决方案8】：

我尝试了其他调试方法，但没有任何帮助。但我找到了这篇文章，这就是我要找的！

How to find the cause of horizontal scrollbars

设置body的宽度为100vw

视口宽度单位 (vw) 是一种有用的方法，可以使事物达到屏幕宽度的特定百分比。

但是，当您使用100vw 时，您会将某些内容设为视口的整个宽度，而这包括滚动条的宽度。所以最终结果是您的页面比可用宽度略宽（即没有滚动条的视口的全宽）。

简而言之：如果您在具有垂直滚动条的页面上使用width: 100vw，您最终会出现水平溢出。

简单的解决方法是改用width: 100%。百分比不包括滚动条的宽度，因此会自动适应。

如果您不能这样做，或者您要在另一个元素上设置宽度，请将 overflow-x: hidden 或 overflow: hidden 添加到周围元素以防止滚动条。

看完后我查了一下，水平溢出正好是垂直滚动条的宽度！在代码中搜索100vw，发现问题。

【讨论】：

【解决方案9】：

使用一些浏览器调试工具。点击F12 打开它并检查 dom 元素。你会找到的。

【讨论】：

设置body的宽度为100vw

设置body的宽度为`100vw`