logo标签列表

如何确定哪个HTML元素导致了垂直滚动条

htmlcsstwitter-bootstrap
95

我正在学习Bootstrap。在“入门菜单”中，提供了几个模板。我正在尝试使用其中的一个固定页脚的示例。我使用了之前示例中的导航栏，并想要将其与固定页脚相结合。但是出现了垂直滚动条。我正在寻找导致垂直滚动条的元素。

这是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>

有没有什么技巧可以用来确定哪个元素导致了滚动条？我之前遇到过类似的问题，但我不记得自己是否找到了简单的解决方案。

1
我发现解决这类问题的最佳方法是进入检查器并开始删除元素，直到滚动条消失。 - Conqueror
1
@Conqueror，确切地说，就在10分钟前，我也发布了相同的答案。但还是谢谢你。期待更多... - Satya Prakash
11个回答
135

添加：

* {
  outline: 1px solid red;
}

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

我已经在下面发布了答案，但重新创建了问题以进行检查。至少在上面的示例中，它没有清楚地表明问题所在！ - Satya Prakash
60

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

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

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

findScroller(document.body);
22

有一篇由Chris Coyier撰写的优秀文章，详细解释了这个问题的所有内容。

阅读完这篇文章后，我个人在控制台中使用以下代码来查找导致垂直滚动的元素：

在浏览器中按下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';
       }
   }
}
9
这看起来是正确的方法，尽管您需要为IE添加备用方案。https://caniuse.com/#feat=document-scrollingelement - Evan Mattson
1

好的，我明白了，如果我将容器的margin-top更改为padding-top以调整导航栏，则问题就解决了。我是通过在Firebug中删除元素来找到解决方案的。所以，快速修复问题已经解决，但我的问题仍然存在。

如何知道哪个元素引起滚动条？有什么诀窍吗？

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

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

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

    }
尝试在你的CSS中添加clear:both;，这将使margin-top起作用。 - Nizam Kazi
@NizamKazi 在哪里？我尝试在 #wrap {} 和 #wrap > .container {} 中。 - Satya Prakash
将其应用于您打算从顶部给出边距的元素。这意味着如果您想向.container应用顶部边距，请向其中添加clear:both CSS属性。如果它不会干扰您网站的对齐方式，请尝试“float:left”或“float:right”。 - Nizam Kazi
1
我发现通常是没有max-width: 100%的图像。
0

我尝试了其他的调试方法，但都没有帮助。但是我找到了这篇文章，正是我所需要的！

如何找到水平滚动条的原因

将页面宽度设置为100vw

视口宽度单位（vw）是一种有用的方法，可以使某些元素占据屏幕的一定百分比。

然而，当您使用100vw时，您会使某些元素占据整个视口的宽度，这包括滚动条的宽度。因此，最终结果是您的页面略微超出可用宽度（即视口的全宽不包括滚动条）。

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

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

如果您无法这样做，或者您正在设置其他元素的宽度，请添加overflow-x: hidden或overflow: hidden到周围的元素以防止出现滚动条。

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

0
在我的案例中，一个隐藏的子元素具有position: absolute，并且相对于body进行渲染，超出了具有overflow: auto的祖先元素之外。
0
以下代码可以帮助您找到导致垂直或水平滚动条出现的元素。
它将找到该元素并在导致滚动条的元素上创建红色边框：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)
0

我找到的唯一方法是向下滚动，然后在控制台中运行以下的jQuery代码：

function navigateTree($element) {
    if ($element.scrollTop() > 0)
        console.log($element.prop("tagName") + ": " + $element.scrollTop());
    $element.children().each((i, o) => {
        navigateTree($(o));
    });
}
navigateTree($("html"));

具有滚动值的元素将打印其标签

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接