如何知道哪個HTML元素導致垂直滾動條

我在學習Bootstrap。在入門菜單中，給出的模板很少。我正在玩這個。一個例子是關於固定頁腳。我使用了前面例子中的nav，並且想用固定頁腳來調整它。但垂直滾動條即將到來。 我正在尋找導致垂直滾動條的元素。如何知道哪個HTML元素導致垂直滾動條

這裏是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>

有沒有什麼絕招，在這些情況下工作，以瞭解哪些因素導致滾動條？我以前遇到類似的問題，我不記得我是否能找到簡單的解決方案。

來源

2013-09-30 Satya Prakash

我發現找出這種性質的問題的最佳方式是進入檢查器並開始刪除元素，直到滾動條消失。 – Conqueror

@征服者正好10分鐘前，我也發佈了相同的答案。但是，謝謝。尋找更多... –

好吧，我說，如果我從邊距更改容器到填充頂來調整導航然後問題就解決了。刪除Firebug中的元素後，我達到了解決方案。所以，快速解決問題已經解決，但我的問題仍然存在。

如何知道哪個元素導致滾動條？任何詭計？

另外，爲什麼margin-top不起作用，但padding-top已經起作用了？

要明確，我做出改變，我將修改後的CSS：

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

    }

來源

2013-09-30 13:57:33

嘗試添加明確：兩者;到你的CSS，它會使邊緣工作 –

@NizamKazi在哪裏？我在#wrap {}和#wrap> .container {}中嘗試過。 –

將它應用於您打算從頂部給出餘量的元素。意思是如果你想將頂部邊距應用於.container，請添加明確：這兩個CSS屬性。如果不妨礙您的網站對齊，請嘗試「float：left」或「float：right」。 –

地址：

* { 
    outline: 1px solid red; 
    }

然後當你向下滾動，你會看到一個那座框。右鍵單擊它並選擇檢查元素。這應該給你你需要的信息。

UPDATE：

這是一個漂亮的鍍鉻插件，可以爲你做的：http://pesticide.io/

來源

2013-09-30 13:56:31 Jeffpowrs

我已經發布了下面的答案，但重新創建問題來檢查此問題。它沒有說明問題在哪裏！至少在上面的例子中。 –

@Jeff Powers：這是自從幾年以來的最佳祕訣...從來沒有想到，但出色地工作！ – Meules

如果可以的話，我會給你+100。這是一個驚人的提示！ – Alexey

使用某些瀏覽器的調試工具。打開F12將其打開並檢查dom元素。你將能夠找到它。

來源

2013-09-30 13:56:44 Blaise

我覺得它通常是沒有最大寬度圖像：100％

來源

2015-07-27 09:27:21

有一個excellent article克里斯科伊爾解釋了你需要解決這個問題的一切。

讀完這篇文章後，我個人使用這個代碼在我的控制檯，找出哪些因素導致垂直滾動：

按F12在瀏覽器中，然後選擇控制檯，然後複製粘貼此代碼出現，然後按回車

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]); 
    } 
}

更新：
可以是一個iframe原因頁面內的元素垂直滾動。在這種情況下，你應該檢查每一個可疑的iframe中使用此代碼：

var frame = document.getElementsByTagName("iframe"); 
frame = frame[0]; 
frame = (frame.contentWindow || frame.contentDocument); 
var all = frame.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]); 
    } 
}

來源

2015-12-16 15:48:19 Mosijava

我說你應該使用window.scrollingElement。

來源

2017-10-16 15:59:32 zhirzh

如何知道哪個HTML元素導致垂直滾動條

回答

相關問題