How to Know Which HTML Element is Causing Vertical Scroll Bar

HtmlCssTwitter Bootstrap

Html Problem Overview

I am learning Bootstrap. On the getting started menu, there are few templates given. I am playing with that. One example is about fixed Footer. I used nav from previous example and wanted to adjust that with fixed footer. But vertical scrollbar is coming. I am looking for element which is causing Vertical Scroll Bar.

Here is 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>

Is there any trick, which works in these cases to know which Element is causing Scroll Bar? I faced similar problem earlier, I do not remember if I could find the easy solution.

Html Solutions

Solution 1 - Html

Add:

* {
  outline: 1px solid red;
}

Then when you scroll down you should see one really tall box. Right click on it and select inspect element. That should give you the information you need.

Solution 2 - Html

Paste the below in the console and scroll. It will log the culprit in the console.

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

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

findScroller(document.body);

Solution 3 - Html

There is an excellent article by Chris Coyier which explain everything you need about this problem.

after reading this article, I personally use this code in my console to find out which element cause vertical scroll:

press F12 in your Browser then choose console and paste the below code there and press 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';
    }
}

Update:
if the above code didn't work it might be an element inside an iframe that make the page to vertically scroll. in this case you can check iframes with this code:

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';
       }
   }
}

Solution 4 - Html

I'd say you should use document.scrollingElement.

Solution 5 - Html

Ok, I got that if I change from margin-top to padding-top for container to adjust for nav then problem is solved. I reached to the solution after deleting elements in Firebug. So, quick fix problem is solved but my questions are still open.

How to know which element is causing scroll bar? Any trick?

Also, why margin-top is not working but padding-top has worked?

To make clear where I made change, I am adding the modified CSS:

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

    }

Solution 6 - Html

I find it's usually an image without a max-width: 100%

Solution 7 - Html

The below code helps you to find which element is causing vertical or holizon scroll bar.

This will find the element and create border with red:5px at the element of causing the scroll bar.

After run this in the devtool of your browser , check if any element has '_____target' class which is causing the scroll bar.

If you find the element, then comment out this tag from html and refresh and try it again.

/* 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)

Solution 8 - Html

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.

Solution 9 - Html

Use some browser debugging tool. Hit F12 to open it and check the dom elements. You'll be able to find it.

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

Creating AMI takes so long

Amazon Ec2Amazon AmiEc2 Ami

Next Solution:

Default values and initialization in Java

JavaInitializationGlobal VariablesDefault ValueLocal Variables

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSatya PrakashView Question on Stackoverflow
Solution 1 - HtmlJeffpowrsView Answer on Stackoverflow
Solution 2 - HtmllcharbonView Answer on Stackoverflow
Solution 3 - HtmlMosijavaView Answer on Stackoverflow
Solution 4 - HtmlzhirzhView Answer on Stackoverflow
Solution 5 - HtmlSatya PrakashView Answer on Stackoverflow
Solution 6 - HtmlSatbir KiraView Answer on Stackoverflow
Solution 7 - HtmlTakeo NishiokaView Answer on Stackoverflow
Solution 8 - Htmlmbomb007View Answer on Stackoverflow
Solution 9 - HtmlBlaiseView Answer on Stackoverflow