jquery - 检查 Bootstrap 折叠导航栏是否溢出

Question

我如何使用 jQuery 检查导航栏(灰色 div)在折叠时是否溢出(滚动条)？看我的例子，当我展开一个子菜单时，导航栏的滚动条将被启用，因为 div 的内容已经溢出。我想在导航栏底部放置一个带有“更多”标签的 div，让用户知道有更多内容并且他们可以向下滚动。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


 <nav class="website-nav navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
        <div class="nav-center">

<!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
            <div class="nav-brand"></div>
        </div>
    </div>
    <div class="alt-nav navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toogle Navigation</span>
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
        </button>
	    <a class="navbar-brand" href="https://www.example.com/">LOGO</a>        
    </div>
<!-- Navigation header -->
    <div class="collapse navbar-collapse" id="collapse">
      
        <ul class="nav navbar-nav">  
            <li {{ INDEX_ACTIVE }}><a href="https://www.example.com/"><span></span> Menu1 <span class="sr-only">(current)</span></a></li>
                
            <li class="visible-xs "><a href="https://www.example.com/?secao=meuPainel"><span></span> Menu2</a></li>
	            
            <li class="dropdown">
                  <a href="?secao=minhaConta" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu3<span class="caret"></span></a>
                  <ul class="dropdown-menu">

                <li class="hidden-xs "><a href="https://www.example.com/?secao=meuPainel"><span ></span> Submenu3.1</a></li>                              

				<li class=""><a href="https://www.example.com/?secao=meusPedidos"><span></span> Submenu3.2</a></li>

                <li class="visible-xs "><a href="https://www.example.com/?secao=meusPedidos" style="display:none;"><span></span> Token</a></li>
                <li role="separator" class="divider visible-sm visible-xs"></li>
                <li ><a href="https://www.example.com/?secao=minhaConta"><span></span>Submenu3.3</a></li>
                <li><a href="https://www.example.com/?secao=interesses"><span></span> Submenu3.4</a></li>				
                <li><a href="https://www.example.com/?secao=alterarSenha"><span></span> Submenu3.5</a></li>
                <li><a href="https://www.example.com/?secao=alterarEmail"><span></span> Submenu3.6</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="https://www.example.com/?acao=sair"><span></span>Submenu3.7</a></li>
              </ul>
			  <li class="visible-md "><a href="https://www.example.com/?secao=meusPedidos"><span></span> Menu4</a></li>              
                </li>
            <li {{ REMOTE_ACTIVE }} ><a href="https://www.example.com/?secao=meuCarrinho"><span></span> Menu5                    
            </a></li>

            
				  
      
        </ul>
        <ul class="nav navbar-nav navbar-right">       
        
          <li ><a href="https://www.example.com/?secao=notificacoes"><span></span> Menu6 </a></li>
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu7<span class="caret"></span></a>
          <ul class="dropdown-menu">
         	<li><a href="https://www.example.com/en/"> Submenu 7.1</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="https://www.example.com/es/"> Submenu 7.2</a>
</li>
            <li role="separator" class="divider"></li>            
            <li><a href="https://www.example.com/"> Submenu 7.3</a>
            </li>

          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu8<span class="caret"></span>&nbsp;</a>
          <ul class="dropdown-menu">
            <li><a href="https://www.example.com/sac">Submenu 8.1</a></li>
            <li><a href="https://www.example.com/sac">Submenu 8.2</a><a href="https://www.example.com/?secao=FAQ"></a></li>
            <li role="separator" class="divider"></li>
            <li><a href="https://www.example.com/sac">Submenu 8.3</a></li>
<li style="display:none;"><a href="https://www.example.com/?secao=carreiras">Trabalhe conosco</a></li>            
            <li  style="display:none;"><a href="https://www.example.com/?secao=comercial">Seja um parceiro</a></li>            
            <li id="navbar-bottom" name="navbar-bottom"></li>
          </ul>
        </li>        
        </ul>   
    </div>
</nav>
<div style="height:1000px; background-color:yellow"> some content</div>

Answer 1

请用一些 id 命名导航栏 div。然后您可以使用以下代码简单地检查滚动宽度以查看 div 是否溢出:

if ($("#navBarDiv").prop('scrollWidth') > $("#navBarDiv").width() ) {
    alert("this element is overflowing !!");
}
else {
    alert("this element is not overflowing!!");
}