Question

我尝试使用右侧/左侧的按钮在具有多个标签的div中水平滚动，因此我无法使用相同的按钮滚动到#hashtag。我想要做的就是像不同标签的Google图片搜索标题一样：

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

和我的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

关键是使用develop

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

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

1 个答案: