项目增加时的动态滚动箭头

Question

如果项目从宽度增加，则需要显示滚动。

已经搜索过了，但是没有找到我想要的东西。

    <div class="page-title-wrapper">
     <ul>                                                                                                    
       <li><a class="base" href="#">Mango</a></li>                                       
       <li><a class="base" href="#">Pineapple</a></li>                                                       
       <li><a class="base" href="#">Apple</a></li>
       <li><a class="base" href="#">Pineapple</a></li>
     </ul>
    </div>

我有一个水平内联项目列表。主DIV“页面标题包装器”具有最大宽度。如果项目在DIV中增加并且超过了最大宽度，则包装器DIV应该显示一个滚动箭头（左右两个箭头）。 在移动视图中，它应该可以滑动。 请引导我。