How to make scrollbar scroll-able in mobile view chrome - html

Question

I've been searching for StackOverflow about my problem, but I didn't find the answer, my problem is, I have navbar menu on top of my website which if you open from mobile browser (chrome, UC browser, etc) its show the scroll bar and the menu can be scrolled if you touch the menu text (black circle) not the scroll bar (blue circle), my scrollbar can't be drag to scroll the menu, but it can be clicked to drag the menu, here is the picture of the menu
and my css is here
.classsname{
height: 300px;
overflow-y: scroll;
position:relative;
z-index: 0;
-webkit-overflow-scrolling:touch;
-webkit-transform:translateZ(0);}
what did I do wrong?
EDIT: my full css with header nav, and header nav
on my 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);
}
}
and i called this css below with this
<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>
and on my 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;}