Мобильное подменю скроллим влево

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?><?
global $USER;
if (!empty($arResult)) {
    $vis = true;
    foreach ($arResult as $k => $arItem) {
        if($arItem["SELECTED"]){
            $vis = false;
            break;
        }
    }?>

   <div class="submenu <?=$vis?"":"hidemenu"?>">
        <ul><?
            foreach ($arResult as $k => $arItem) {?>
                <li><a href="<?= $arItem["LINK"] ?>" <? if ($arItem["SELECTED"]) { ?>class="active" <? } ?>><?= $arItem["TEXT"] ?></a></li>
            <? } ?>
        </ul>
   </div>
<? } ?>

.submenu{  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 28px 0 25px;
}
.submenu.hidemenu{
  opacity: 0;
}
.submenu::-webkit-scrollbar {
  display: none;
}
.submenu ul{
  display: inline-block;
  margin: 0 10px;
}
@media (min-width: 500px) {
  .submenu ul{
    margin: 0 35px;
  }
}
.submenu ul li{
  display: inline;
  margin: 0 5px;
}
.submenu ul li a{
  display: inline-block;
  padding: 5px 7px;
  background: #EDEDED;
  text-decoration: none;
  color: #000;
}
.submenu ul li a.active{
  color:#fff;
  background: #2C77D2;

}

if($('.submenu .active').length>0){    
    
    //если элемент целиком невидно
    if(($(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth)>window.innerWidth) {
        $(".submenu").animate({
            //по правому краю
            scrollLeft:$(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth-window.innerWidth+10 
            //по центру    
            //scrollLeft: $(".submenu .active").offset().left - (window.innerWidth-$(".submenu .active")[0].offsetWidth)/2 
              
        }, 1);
        setTimeout(function(){
            $(".submenu").css('opacity',1);
        },1);
    }
    else{
        $(".submenu").css('opacity',1);
    }
}