Як дізнатися, який елемент HTML викликає вертикальну смугу прокрутки

76

Я вивчаю 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>

Чи існує якась хитрість, яка працює в цих випадках, щоб дізнатись, який Елемент викликає смугу прокрутки? Я зіткнувся з подібною проблемою раніше, не пам’ятаю, чи зміг би я знайти просте рішення.

html  css  twitter-bootstrap 
— Сатя Пракаш
джерело
1
Найкращий спосіб виявити проблеми подібного характеру - це зайти в інспектор і почати видаляти елементи, поки смуга прокрутки не зникне.
— Завойовник
1
@Conqueror Рівно 10 хвилин тому я також розмістив ту саму відповідь. Але спасибі. Шукаєте більше ...
— Сатья Пракаш

Відповіді:

112

Додати:

  * {
   outline: 1px solid red;
  }

Потім, коли ви прокручуєте вниз, ви побачите одну справді високу коробку. Клацніть правою кнопкою миші та виберіть елемент перевірки. Це має дати вам необхідну інформацію.

ОНОВЛЕННЯ:

Ось чудовий хромовий плагін, який може зробити це за вас: http://pesticide.io/

— Джефпоурс
джерело
Я розмістив відповідь нижче, але повторно створив проблему, щоб перевірити це. Не ясно, де проблема! принаймні у наведеному прикладі.
— Сатья Пракаш
6
@Jeff Powers: Це найкраща порада за роки ... Ніколи про це не думав, але працює блискуче !!
— Meules
2
Якби я міг, я б дав тобі +100. Це дивовижна порада!
— Олексій
1
Це чудово підходить для кількох інших проблем із візуальним форматуванням, дякую!
— kingPuppy
2
великі пальці вгору для розширення. зафіксовано 30 хвилин пошуку буквально 5 секунд
— devman
16

Є чудова стаття Кріса Койєра, яка пояснює все, що вам потрібно щодо цієї проблеми.

прочитавши цю статтю, я особисто використовую цей код у своїй консолі, щоб з'ясувати, який елемент викликає вертикальну прокрутку:

натисніть 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';
       }
   }
}
— Мосіжава
джерело
14

Вставте нижче в консоль і прокрутіть. Він зафіксує винного в консолі.

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

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

findScroller(document.body);
— lcharbon
джерело
1

Гаразд, я зрозумів це, якщо перейду з margin-top на padding-top для контейнера для налаштування для nav, тоді проблема буде вирішена. Я дійшов до рішення після видалення елементів у Firebug. Отже, проблема швидкого виправлення вирішена, але мої запитання все ще відкриті.

Як дізнатися, який елемент викликає смугу прокрутки? Будь-який фокус?

Крім того, чому margin-top не працює, але padding-top спрацював?

Щоб зрозуміти, де я вніс зміни, я додаю змінений CSS:

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

    }
— Сатя Пракаш
джерело
спробуйте додати clear: both; для вашого css, це зробить маржинальну роботу
— Nizam Kazi
@NizamKazi де? Я спробував #wrap {} та #wrap> .container {}.
— Сатья Пракаш
застосуйте його до елемента, який ви збиралися надати поля зверху. Означає, якщо ви хочете застосувати верхнє поле до .container, додайте clear: both css властивість до нього. Також спробуйте "float: left" або "float: right", якщо це не заважає вирівнюванню вашого сайту.
— Nizam Kazi
0

Наведений нижче код допоможе вам знайти, який елемент викликає вертикальну смугу прокрутки або холізонову смугу.

Це знайде елемент і створить межу з червоним: 5 пікселів у елементі, що викликає смугу прокрутки.

Після запуску цього у 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)
— Такео Нішіока
джерело
-4

Скористайтеся інструментом налагодження браузера. Натисніть, F12щоб відкрити його та перевірити елементи dom. Ви зможете його знайти.

— Блез
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.