如何修复移动菜单太长而无法滚动，也不会显示菜单上的所有项目

This is my menu.

这是我的菜单。

It's too long that I cant scroll down and view the other list items.

太长了以至于我无法向下滚动并查看其他列表项。

The nav bar has a "position: fixed;" attribute.

导航栏有“位置:固定;”属性。

I tried using "overflow-y: scroll;" on the list or trying out attributes from this post: Collapsible menu is too long for mobile landscape that didnt help my situation.

我尝试使用“overflow-y:scroll;”在列表上或尝试从这篇文章的属性:可折叠菜单太长的移动景观,没有帮助我的情况。

This is my html:

这是我的HTML:

        <div class="list">    
        <h2 id="cat-header"> ALL CATEGORIES</h2>
            <ul class="sports">
                <li> <a href="#" > Baseball </a></li>
                <li> 
                    <a href="#" > Basketball </a>
                    <ul class="sports2">
                        <li><a href="#" class="selected">NBA</a></li>
                        <li><a href="#" class="selected">Euroleague</a></li>
                        <li><a href="#" class="selected">German basketball</a></li>
                    </ul>
                </li>
                <li> <a href="#" > Boxing </a></li>
                <li> <a href="#" > Cricket </a></li>
                <li> <a href="#" > Darts </a></li>
                <li> <a href="#" > Football </a></li>
                <li> <a href="#" > Golf </a></li>
                <li> <a href="#" > Hockey</a></li>
                <li> <a href="#" > Martial Arts </a></li>
                <li> <a href="#" > Rugby </a></li>
                <li> <a href="#" > Snooker </a></li>
                <li> <a href="#" > Tennis </a></li>
                <li> <a href="#" > Lacrosse </a></li>
                <li> <a href="#" > Softball </a></li>
                <li> <a href="#" > Olympics </a></li>
            </ul>
        </div>

and this is my CSS relevant only to mobile:

这是我的CSS仅与移动相关:

/******************/
/*** MOBILE ******/
/****************/

.header_space{
    display: none;
    height: 90px;
}

#mob-menu-btn{
    display: none;
}



/*****************************************************************/

@media (max-width: 604px)  {

    .main{
        width: 100%;
        overflow: hidden;
    }

    .sidebar{
        float: initial;
        width: 100%;
        padding: 0;
        background-color: red;
        height: 100px;
        position: fixed;
        z-index: 100;
    }

    .header_space{
        display: inherit;
        height: 78px;
    }

    .sports{
        display: none;
        padding: 0 ;
    }

    .sports {
        background-color: #fff;
        margin: 0;
        width:100%;
    }

.list{
        width: 100%;
        overflow-y: scroll;
    }

    .sports li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 2px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 10px;
        width:100%;
        font-family: "UScoreRGK";

    }

    .sports2{
        display: none;
    }

    #mob-menu-btn{
        display: inherit;
        cursor: pointer;
        margin-top: 2px
    }


}

2 个解决方案

#1

It looks like you just need to set a height or max-height of 100% on your .list see generic example below:

看起来您只需要在.list上设置100%的高度或最大高度,请参阅下面的通用示例:

body {
  height: 1000px;
}
.fixedSideNav {
  max-height: 100%;
  position: fixed;
  overflow-y: scroll;
}

<nav class="fixedSideNav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>

</nav>

#2

I used a class that makes the body of the page "position: fixed;"

我使用了一个类,使页面的主体“位置:固定;”

using jQuery:

$('#mob-menu-btn').click(function(){

var isHidden = $('.sports').is(':visible');

    if (isHidden){
        $( "body" ).removeClass( "makeFixed" );
    }else{
        $( "body" ).addClass( "makeFixed" );
    }
    $('.sports').slideToggle("slow");
})

#1