Question

我正在尝试使用带有（左右）滚动的箭头标记来实现水平滚动div部分。

我实现的是滚动，但它是无限滚动，滚动应该在结束后停止。

到目前为止我尝试了什么，

<div class="scrollleft" style="float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div>
    <div class="container scrollbar"
    style="white-space: nowrap; overflow-x: hidden; overflow-y: hidden; width:100%;">
       <div > some content </div>
        <div > some content </div>
        <div > some content </div>
        <div > some content </div>
    </div>
</div>
<div class="scrollright" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div>

脚本：

$('.scrollright').click(function() {

  event.preventDefault();

  $('.scrollbar').animate({
    marginLeft: "-=200px"
  }, "fast");
 });

$('.scrollleft').click(function() {
  event.preventDefault();
  $('.scrollbar').animate({
    marginLeft: "+=200px"
  }, "fast");
 });

});

Answer 1

你可以保存当前所选div的索引，并检查它是否在范围内（从0到div的数量）

var numberOfDivs = $(".container>div").length;
var index = 0;

$('.scrollright').click(function() {
  event.preventDefault();
  if (index <= 0)
    return;
  index += 1;

  $('.scrollbar').animate({
    marginLeft: "-=200px"
  }, "fast");
 });

$('.scrollleft').click(function() {
  event.preventDefault();
  if (index >= numberOfDivs)
    return;
  index -= 1;

  $('.scrollbar').animate({
    marginLeft: "+=200px"
  }, "fast");
 });

Answer 2

您不需要event.preventDefault();。您必须为两个方向中的每个方向定义结束。对于scrollright点击，结尾为0，对于scrollleft点击，结尾是window的宽度减去scrollbar的宽度（但是你放了它为100％，所以我现在减去200）：

＆＃13;

var BoxCount = 4;
var BoxWidth = 100;
var ScrollDistance = BoxWidth; //It can be any other value if you like.
var ScrollButtonWidth = 50;

$('.scrollright').click(function() {
  var current = parseInt($('.scrollbar').css("margin-left"));
  var end = $(window).width() - BoxWidth - ScrollButtonWidth;
  var move = ScrollDistance;
  if(current < end){
    if((end - current) < BoxWidth)
      move = end - current;
    $('.scrollbar').animate({ marginLeft: "+=" + move }, "fast");
  }
  else{
    $('.scrollbar').animate({ marginLeft: end }, "fast");
  }
 });

$('.scrollleft').click(function() {
  var current = parseInt($('.scrollbar').css("margin-left"));
  var end = - (BoxWidth * (BoxCount - 1));
  var move = ScrollDistance;
  if(current > end){
    if((current - end) < BoxWidth)
      move = current - end;
    $('.scrollbar').animate({ marginLeft: "-=" + move }, "fast");
  }
  else{
    $('.scrollbar').animate({ marginLeft: end }, "fast");
  }
 });

＆＃13;

.scrollleft, .scrollright{
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 100px;
  color: #fff;
  background-color: #555;
  line-height: 100px;
  text-align: center;
  box-sizing: border-box;
}

.scrollleft:hover, .scrollright:hover{
  background-color: #999;
}

.container{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  height: 100px;
  width: calc(100% - 40px); /* 100% - (2 * ScrollButtonWidth) */
  background-color: #eee;
  box-sizing: border-box;
}

.scrollbar{
  display: inline-block;
  box-sizing: border-box;
}

.contentbox{
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #f00;
  border: 1px solid #f00;
  line-height: 100px;
  text-align: center;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollleft" style="float: left;">&lt;</div
><div class="container">
  <div class="scrollbar">
     <div class="contentbox">content-1</div
     ><div class="contentbox">content-2</div
     ><div class="contentbox">content-3</div
     ><div class="contentbox">content-4</div>
  </div>
</div
><div class="scrollright" style="float: right;">&gt;</div>

＆＃13;

youtube喜欢水平滚动div

2 个答案: