h5 解决横向滚动条内容显示不全与滚动条隐藏

<div class="jump" >
        <div class="jumpLittleBox">
            <div class="noticeListBox">
                <div class="val btn-primary" name="2013">2013</div>
                <div class="val" name="2014">2014</div>
                <div class="val" name="2015">2015</div>
                <div class="val" name="2016">2016</div>
                <div class="val" name="2017" >2017</div>
                <div class="val" name="2018" >2018</div>
                <div class="val" name="2019" >2019</div>
                <div class="val" name="2020" >2020</div>
            </div>
        </div>
    </div>

css:

.jump{
        width: 100%;
        height: 42px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
    .jumpLittleBox{
        width: 80%;
        overflow-x: auto;
        height: 50px;
        /* overflow: hidden; */
    }
    .noticeListBox{
        /* padding: 0 12px; */
        height: 50px;
        width: 413px;
        box-sizing: border-box;
        overflow-x: auto;
        display: -webkit-box;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: hidden;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    .noticeListBox::-webkt-scrollbar{
        display: none;
    }
    .noticeListBox div{
        height: 26px;
        /*text-align: center;*/
        margin: 2px;
        padding: 5px 6px;
        border-radius: 4px;
        box-shadow: 4px 4px 12px rgba(40%,40%,40%,0.3);
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
    }