86

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

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

4

9 回答 9

129

添加：

* {
  outline: 1px solid red;
}

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

于 2013-09-30T13:56:31.283 回答
36

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

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

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

findScroller(document.body);
于 2020-03-28T16:55:28.967 回答
18

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';
       }
   }
}
于 2015-12-16T15:48:19.353 回答
8

I'd say you should use document.scrollingElement.

于 2017-10-16T15:59:32.213 回答
1

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

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

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

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

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

    }
于 2013-09-30T13:57:33.623 回答
1

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

于 2015-07-27T09:27:21.400 回答
0

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

这将找到元素并在导致滚动条的元素处创建带有 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)
于 2020-12-09T05:06:57.407 回答
0

I had tried the other debugging methods and nothing helped. But I found this article, and it's what I'm looking for!

How to find the cause of horizontal scrollbars

Setting the width of the body to 100vw

The viewport width unit (vw) is a useful way to make things a certain percentage of the screen wide.

When you use 100vw however, you make something the full width of the viewport and this includes the width of scrollbars. So the end result is that your page is slightly wider than the available width (which is the full width of the viewport without the scrollbars).

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow.

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.

If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

After reading this, I checked, and the horizontal overflow was exactly the width of the vertical scrollbar! Searched for 100vw in the code and found the problem.

于 2021-10-28T19:03:30.173 回答
-4

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

于 2013-09-30T13:56:44.840 回答