javascript - Horizontally scroll hidden overflow-x with buttons and JS - Stack Overflow

admin管理员组

文章数量:1313001

I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:

Link to example

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

I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:

Link to example

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 27, 2021 at 9:22 mplungjan 178k2828 gold badges181181 silver badges240240 bronze badges asked Jul 17, 2017 at 20:09 Abdullah AlkurdiAbdullah Alkurdi 41811 gold badge66 silver badges1111 bronze badges 4

• What's the question? Please put your markup and CSS in a demo somewhere. jsfiddle works well. – isherwood Commented Jul 17, 2017 at 20:14
• Can someone edit this question to make it clearer? – Kamga Simo Junior Commented Jul 17, 2017 at 20:14
• here is a live link to the example : pandoz./example-page the arrows on the sides arent working – Abdullah Alkurdi Commented Jul 17, 2017 at 20:26
• are you using any css framework? – Omi Commented Jul 17, 2017 at 20:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

the key is using 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./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>

本文标签： javascriptHorizontally scroll hidden overflowx with buttons and JSStack Overflow