使用按钮和 JS 水平滚动隐藏的溢出-x [英] Horizontally scroll hidden overflow-x with buttons and JS

查看：23
本文介绍了使用按钮和 JS 水平滚动隐藏的溢出-x的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用右侧/左侧的按钮在具有多个 a 标签的 div 中水平滚动，因此我无法使用相同的按钮滚动到 #hashtag.我正在尝试做的与不同标签的 Google 图片搜索标题完全一样:

链接到例子

.prsc {溢出-x:隐藏；溢出-y:隐藏；显示:块；填充顶部:1px；}.prs {/* 里面的元素 */显示:内联块；高度:继承；左:20px；填充底部:5px；padding-right: 5px;位置:相对；垂直对齐:顶部；空白:nowrap；浮动:对；}.Jyg {高度:80px；边距:-10px 2px 0;溢出:隐藏；显示:块；}.ichpcnt {-webkit-overflow-scrolling:触摸；高度:100px；溢出-x:滚动；溢出-y:隐藏；填充:10px 0 0；空白:nowrap；宽度:100%；显示:块；}.yg {右边距:6px；显示:内联块；}.prc {/* 整个内部 */边距:-30px 0px 0;填充:10px 0px 10px 0;位置:相对；溢出:隐藏；}.OY{高度:90px；显示:块；}.allPlacesBtn {字体系列:开罗；边距顶部:-40px；底边距:25px；字体大小:45px；显示:网格；}.prp {背景:白色；底部:0；不透明度:1；位置:绝对；顶部:11px；宽度:20px；z-索引:10；显示:块；}

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

解决方案

关键是使用 white-space: nowrap;

$('#prev').on('click', function() {$('#menu ul').animate({滚动左:'-= 100'}, 300, '摇摆');});$('#next').on('click', function() {$('#menu ul').animate({滚动左:'+ = 100'}, 300, '摇摆');});

#menu {位置:相对；}ul{宽度:300px；溢出:隐藏；空白:nowrap；显示:块；列表样式:无；填充:0；}李{宽度:80px；高度:50px；显示:内联块；文本对齐:居中；}li:第n个孩子(奇数){背景颜色:黄色；}li:第n个孩子(偶数){背景颜色:蓝色；}#导航{位置:绝对；顶部:0；宽度:300px；}#prev {显示:内联块；位置:绝对；左:0；背景颜色:#ceaaaa；填充:5px；光标:指针；顶部:10px；字体粗细:粗体；}#下一个 {位置:绝对；右:0；显示:内联块；背景颜色:#ceaaaa；填充:5px；光标:指针；顶部:10px；字体粗细:粗体；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div id="菜单"><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><div id="导航"><div id="prev">Prev</div><div id="下一个">下一个</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>

解决方案

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

这篇关于使用按钮和 JS 水平滚动隐藏的溢出-x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆