如何在移动视图chrome中滚动条滚动

Question

我一直在搜索关于我的问题的StackOverflow，但我没有找到答案，我的问题是，我在我的网站上有navbar菜单，如果你从手机上打开浏览器(chrome, UC browser, etc)它显示滚动条和菜单可以滚动如果你触摸菜单文本（黑色圆圈）而不是滚动条（蓝色圆圈），我的滚动条无法拖动滚动菜单，但它可以点击拖动菜单，这里是菜单图片

我的css在这里

.classsname{
        height: 300px; 
        overflow-y: scroll;
        position:relative;
        z-index: 0;
        -webkit-overflow-scrolling:touch;
        -webkit-transform:translateZ(0);}

我做错了什么？

编辑：我的完整css与header nav和header nav

在我的php上

@media (max-width: 991px)
    {
      .mean-nav .header-nav{
        height: 300px; 
        overflow-y: scroll;
        position:relative;
        z-index: 0;
        -webkit-overflow-scrolling:touch;
        -webkit-transform:translateZ(0);
      }
    }

我在下面用这个

调用了这个css

                <ul id="menu-main-menu" class="header-nav clearfix">
                <li class="menu-item <?= $isHome ? 'current-menu-item' : '' ?>"><a title="Home" href="<?= Url::home();?>">Home</a>
                </li>
                <li class="menu-item menu-item-has-children <?php
                $a = Url::current();
                if((Url::current() == Url::to(['site/about'])) or (strpos($a, 'event')))
                  echo 'current-menu-item';
                ?>"><a title="About">About</a>
                  <ul class="sub-menu">
                    <li class="menu-item"><a title="Vision and Mission" href="<?= Url::to(['site/about']) ?>">Vision and Mission</a></li>
                    <li class="menu-item"><a title="Event" href="<?= Url::to(['event/index', 'page'=>'1']) ?>">Event</a></li>
                  </ul>
                </li> 
                .....
                </ul>

和我的css

  a.meanmenu-reveal{
    overflow-y: scroll;
    z-index: 1;
    top:-50px !important;

  }
  .mean-container .mean-bar .mean-nav ul li a.mean-expand{
    font-size: 24px;
    line-height: 18px !important;
  }
  nav.main-menu{margin-top:0;}