用按钮和JS水平滚动隐藏的overflow-x

.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;
}

<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>

$('#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>