Как определить, есть ли горизонтальная полоса прокрутки?

Question

Итак, я делаю эту тему WordPress, она отзывчива, за исключением этого: когда я меняю окно вниз (но больше 600 пикселей, потому что тогда меню изменится на мобильную версию) и наведите курсор на пункт меню пункта меню. Это иногда далеко в сторону, поэтому появляется полоса прокрутки. Моя идея решить эту проблему - обнаружить, когда появляется (горизонтальная) полоса прокрутки, а затем переупорядочить меню. Проблема в том, что я не знаю, как определить, появляется ли полоса прокрутки.

Я пробовал пару вещей, но он не близок к работе, поэтому здесь нет необходимости вводить код. Я пробовал некоторые вещи с jquery, javascript и css, но ничего не работает. Также это моя первая тема, поэтому я новичок в этих вещах.

EDIT После запроса здесь является HTML, CSS и JQuery (который я использовал после ответа здесь

HTML:.

<div class="menu"> 
<ul class="nav-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;"> 
<li class="current_page_item"> 
<a href="http://localhost/wordpress/">Home</a> 
</li> 
<li class="page_item page-item-23 page_item_has_children"> 
<a href="http://localhost/wordpress/groep-8-ers/" class="sf-with-ul">Groep 8-ers</a> 
<ul class="children" style="display: none;"> 
<li class="page_item page-item-1801"> 
<a href="http://localhost/wordpress/groep-8-ers/andere-info/">Andere info</a> 
</li> 
<li class="page_item page-item-25 page_item_has_children"> 
<a href="http://localhost/wordpress/groep-8-ers/de-afdelingen/" class="sf-with-ul">De afdelingen</a> 
<ul class="children" style="display: none;"> 
</li> 
</ul> 
</li> 
<li class="page_item page-item-213 page_item_has_children"> 
<a href="http://localhost/wordpress/ouders/" class="sf-with-ul">Ouders</a> 
<ul class="children" style="display: none;"> 
<li class="page_item page-item-215 page_item_has_children"> 
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/" class="sf-with-ul">Algemene schoolzaken</a> 
<ul class="children" style="display: none;"> 
<li class="page_item page-item-1805 page_item_has_children"> 
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/test/" class="sf-with-ul">Test</a> 
<ul class="children" style="display: none;"> 
<li class="page_item page-item-1810"> 
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/test/fffff/">fffff</a> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</div> 

CSS:

.main-navigation { 
    position: relative; 
    float: left; 
    width: 100%; 
    display: block; 
    clear: both; 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    background: #F2F2F2; 
    background: hsl(0, 0%, 95%); 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    position: relative; 
} 
.main-navigation a { 
    display: block; 
    padding: 1.1em 1em; 
    font-size: 17px; 
    font-size: 1.7rem; 
    text-decoration: none; 
    line-height: 1.3em; 
    color: #000; 
    color: hsl(0, 0%, 0%); 
} 
.main-navigation ul ul { 
    position: absolute; 
    left: 0; 
    z-index: 99999; 
    display: none; 
    float: left; 
    padding: 0; 
    background: #CFCFCF; 
    background: hsl(0, 0%, 81%); 
} 
.main-navigation ul ul ul { 
    left: 100%; 
    top: 0; 
    background: #9E9E9E; 
    background: hsl(0, 0%, 62%); 
} 

.main-navigation ul ul ul ul{ 
    background: #6D6D6D; 
    background: hsl(0, 0%, 43%); 
} 

.main-navigation ul ul ul ul ul{ 
    background: #3D3D3D; 
    background: hsl(0, 0%, 24%); 
    color: white; 
} 

.main-navigation ul ul a { 
    width: 200px; 
} 
.main-navigation ul ul li { 
} 
.main-navigation li:hover > a { 
    color: #000; 
    color: hsl(0, 0%, 0%); 
    background: #CFCFCF; 
    background: hsl(0, 0%, 81%); 
} 
.main-navigation ul ul :hover > a { 
    background: #9E9E9E; 
    background: hsl(0, 0%, 62%); 
} 

.main-navigation ul ul ul :hover > a{ 
    background: #6D6D6D; 
    background: hsl(0, 0%, 43%); 
} 

.main-navigation ul ul ul ul :hover > a{ 
    background: #3D3D3D; 
    background: hsl(0, 0%, 24%); 
    color: white; 
} 

.main-navigation ul li:hover > ul { 
    display: block; 
} 
.main-navigation .current_page_item > a, 
.main-navigation .current-menu-item > a, 
.main-navigation .current_page_item > a:hover, 
.main-navigation .current-menu-item > a:hover { 
    background: #80F77E; 
    background: hsla(119, 100%, 50%, 0.4); 
    color: #000; 
    color: hsl(0, 0%, 0%); 
} 

.main-navigation .current_page_ancestor { 
    background: #4d4d4d; 
    background: hsl(0, 0%, 30%); 
} 

.main-navigation ul ul .current_page_parent, 
.main-navigation .current_page_parent .current_page_item > a { 
    color: #fff; 
    color: hsl(0, 0%, 100%); 
    background: #313131; 
    background: hsl(0, 0%, 19%); 
} 

JQuery :

jQuery(document).ready(function($){ 
    $('a').each(function(){ 
     if ($(this).width > $(this).parent().width()) { 
      $('.main-navigation').css('background-color', 'red'); 
     } 
    }); 
}); 

Answer 1

Проверьте с jquery, если ширина внутреннего элемента больше ширины родителей.

, если у вас есть эта структура:

<div class="nav"> 
    <ul> 
     <li><a href="#">Test</li> 
    </ul> 
</div> 

Проверьте ширину с JQuery:

$(document).ready(function(){ 
    $('a').each(function(){ 
     if ($(this).width > $(this).parent().width()) { 
      //do something when it has scrollbar 
     } 
    }); 
});