单击滚动div

Question

我正在处理一个水平显示的简单列表，并将滚动条设置为隐藏。

我添加了两个按钮以向左和向右滚动列表，并调整显示另外3个项目的列表。

我的问题是隐藏数据没有显示，我尝试使用边距，但是单击左按钮时仅容器元素在移动。

$('ul li').each(function(i){
    var index = i+1;
    $(this).find('span').html(index);
});


var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

$('.control .left').click(function(){
    $('.list').css('scrollLeft', 1500);
});

ul li{
  width: 45px;
  height: 101px;
  list-style-type: none;
  border-right: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  text-align: center;
  float: right;
  border: 1px solid green;
}
.list{
  width: 330px;
height: 101px;
overflow: hidden;
  background-color: #DDD;
  float: left;
}
ul{
  height: 100%;
  margin: 0;
  padding: 0;
}
.control{
  float: left;
}
.control div{
  background-color: #DDD;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 100px;
  position: relative;
}
.control span{
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
</ul>
</div>
<div class="control">
  <div class="left"><span><</span></div>
  <div class="right"><span>></span></div>
</div>

Answer 1

您的示例有很多问题：

• 您需要使用HTML中的<和>对<和>进行转义
• 在您发布的示例中，它使用.scrollLeft(100)，但是您使用.css('scrollLeft', 150)，什么都不起作用
• 您的li元素不在一行中，由于您的样式而被包装，因此没有水平滚动
• 将hidden溢出更改为auto成为可用的滚动条

$('ul li').each(function(i){
    var index = i+1;
    $(this).find('span').html(index);
});


var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

$('.control .right').click(function(){
    $('.list').scrollLeft(150);
});
$('.control .left').click(function(){
    $('.list').scrollLeft(0);
});

ul li{
  width: 45px;
  height: 101px;
  list-style-type: none;
  border-right: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  text-align: center;
  display: inline-block;
  border: 1px solid green;
}
.list{
  width: 330px;
height: 101px;
overflow: auto;
  background-color: #DDD;
  float: left;
  white-space: nowrap;
}
ul{
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.control{
  float: left;
}
.control div{
  background-color: #DDD;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 100px;
  position: relative;
}
.control span{
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
  <li>
    item <span></span>
  </li>
</ul>
</div>
<div class="control">
  <div class="left"><span>&lt;</span></div>
  <div class="right"><span>&gt;</span></div>
</div>