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

76

我正在学习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>

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

html  css  twitter-bootstrap 
— 萨蒂亚·普拉卡什（Satya Prakash）
source
1
我发现找出此类问题的最佳方法是进入检查器并开始删除元素，直到滚动条消失为止。
— 征服者2013年
1
@征服者恰好10分钟前，我还发布了相同的答案。但是，谢谢。寻找更多...
— Satya Prakash 2013年

Answers:

112

加：

  * {
   outline: 1px solid red;
  }

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

更新：

这是一个漂亮的chrome插件，可以为您完成此操作：http : //pesticide.io/

— 杰夫·鲍尔斯
source
我在下面发布了答案，但重新创建了问题以进行检查。目前尚不清楚问题出在哪里！至少在以上示例中。
— 萨蒂亚·普拉卡什
6
@Jeff Powers：这是多年来最好的技巧...没想到，但是效果很好！
— Meules
2
如果可以的话，我会给你+100。这是一个了不起的提示！
— 阿列克谢2015年
1
非常适合其他几个视觉格式类型问题，谢谢！
— kingPuppy
2
赞成扩展。在5秒内固定30分钟的搜索时间
— devman
16

克里斯·科耶尔（Chris Coyier）撰写了一篇很棒的文章，解释了您需要解决的所有问题。

阅读本文之后，我个人在控制台中使用以下代码来找出哪个元素导致垂直滚动：

F12在浏览器中按，然后选择console并粘贴以下代码，然后按Enter：

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';
       }
   }
}
— 莫西爪哇
source
14

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

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

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

findScroller(document.body);
— 查邦
source
1

好的，我明白了，如果我将容器的margin-top更改为padding-top以调整nav，那么问题就解决了。在删除Firebug中的元素后，我到达了解决方案。因此，快速修复问题已解决，但我的问题仍然悬而未决。

如何知道哪个元素导致滚动条？有什么把戏吗？

另外，为什么margin-top无效，而padding-top无效？

为了清楚说明更改的地方，我添加了修改后的CSS：

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

    }
— 萨蒂亚·普拉卡什（Satya Prakash）
source
尝试添加clear：both; 到您的CSS，这将使边际
— 收益
@NizamKazi在哪里？我在#wrap {}和#wrap> .container {}中尝试过。
— 萨蒂亚·普拉卡什
将其应用于您打算从顶部给出边距的元素。意味着如果要对.container应用上边距，请向其添加clear：boss属性。如果不干扰您网站的对齐，也请尝试“ float：left”或“ float：right”。
— 尼扎姆·卡兹
0

下面的代码可帮助您找到导致垂直或holizon滚动条的元素。

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

在浏览器的devtool中运行此命令之后，检查是否有任何元素具有导致滚动条的'_____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)
— 西冈武夫
source
-4

使用一些浏览器调试工具。点击F12打开并检查dom元素。您将能够找到它。

— 布莱斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.