Défiler horizontalement caché débordement-x avec les boutons et JS

Question

J'essaie d'utiliser les boutons sur les côtés droit/gauche pour faire défiler horizontalement dans un div qui a plusieurs étiquettes, de sorte que je ne peux pas utiliser le même bouton pour faire défiler un #hashtag. Ce que je suis en train de faire est exactement comme Google Images en-tête de la recherche pour différents tags:

Link to example

<div class="custHdrBtns"> 
    <div class="allPlacesBtn"> 

    </div> 
    <div class="OYi prc"> 


      <div class="prsc prse"> 

       <div class="prs"> 

        <div class="Jyg"> 

         <div class="ichpcnt" id="scrollArea"> 

          <div class="Iyg"> 

           <div class="vc_btn3-container headBtns vc_btn3-center"> 

            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 
            <a href="#1499936731811-0893bace-de28" title="">link</a> 

           </div> 

          </div> 


         </div> 

        </div> 
       </div> 
      </div> 

    </div> 
</div> 

et mon CSS:

.prsc { 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: block; 
    padding-top : 1px; 
} 

.prs {           /* the elements inside */ 
    display: inline-block; 
    height: inherit; 
    left: 20px; 
    padding-bottom: 5px; 
    padding-right: 5px; 
    position: relative; 
    vertical-align: top; 
    white-space: nowrap; 
    float: right; 
} 
.Jyg { 
    height: 80px; 
    margin: -10px 2px 0; 
    overflow: hidden; 
    display: block; 
} 

.ichpcnt { 
    -webkit-overflow-scrolling: touch; 
    height: 100px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    padding: 10px 0 0; 
    white-space: nowrap; 
    width: 100%; 
    display: block; 
} 
.Iyg { 
    margin-right: 6px; 
    display: inline-block; 
} 


.prc {  /* the whole inner */ 
    margin: -30px 0px 0; 
    padding: 10px 0px 10px 0; 
    position: relative; 
    overflow: hidden; 
} 
.OYi { 
    height: 90px; 
    display: block; 
} 

.allPlacesBtn{ 
    font-family: cairo; 
    margin-top: -40px; 
    margin-bottom: 25px; 
    font-size: 45px; 
    display : grid; 
} 


.prp { 
    background: white; 
    bottom: 0; 
    opacity: 1; 
    position: absolute; 
    top: 11px; 
    width: 20px; 
    z-index: 10; 
    display: block; 
} 

Answer 1

la clé à l'aide white-space: nowrap;

$('#prev').on('click', function() { 
 
    $('#menu ul').animate({ 
 
    scrollLeft: '-=100' 
 
    }, 300, 'swing'); 
 
}); 
 

 
$('#next').on('click', function() { 
 
    $('#menu ul').animate({ 
 
    scrollLeft: '+=100' 
 
    }, 300, 'swing'); 
 
});

#menu { 
 
    position: relative; 
 
} 
 

 
ul { 
 
    width: 300px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    display: block; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 80px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
li:nth-child(odd) { 
 
    background-color: yellow; 
 
} 
 

 
li:nth-child(even) { 
 
    background-color: blue; 
 
} 
 

 
#nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 300px; 
 
} 
 

 
#prev { 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0; 
 
    background-color: #ceaaaa; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
    top: 10px; 
 
    font-weight: bold; 
 
} 
 

 
#next { 
 
    position: absolute; 
 
    right: 0; 
 
    display: inline-block; 
 
    background-color: #ceaaaa; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
    top: 10px; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <ul> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
    <li>item4</li> 
 
    <li>item5</li> 
 
    <li>item6</li> 
 
    <li>item7</li> 
 
    <li>item7</li> 
 
    </ul> 
 
    <div id="nav"> 
 
    <div id="prev">Prev</div> 
 
    <div id="next">Next</div> 
 
    </div> 
 
</div>