如何平滑滚动添加元素？

Question

点击两个箭头制作无限滚动框！我通过添加/减去15px来进行每个滚动。我通过添加现有元素检测到滚动左min和max值以进行无限滚动，但其滚动范围不会转到15。它滚动到整个div宽度。在添加元素（不是元素宽度）后，如何将其滚动到15（px）？

＆＃13;

＆＃13;

$("#left").click(function(){
  var left = $("#round").scrollLeft() - 15;
  if(left == -15) {
     $("#round div:last-of-type").remove().prependTo("#round");
  }
  $("#round").scrollLeft(left);
});

$("#right").click(function(){
   var left = $("#round").scrollLeft() + 15;
   if(left == 315) {
     $("#round div:first-of-type").remove().appendTo("#round");
  }
   $("#round").scrollLeft(left);
});

＆＃13;

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}
#round {
 max-width:500px;
 max-height:100px;
 width:500px;
 height:100px;
 border:1px solid #bbb;
 overflow:auto; 
 display: -webkit-inline-box;
 position:relative;
}

#round div{
width:200px;
height:inherit;
}

#one {
 background:red;
}
#two {
background:pink;
}
#three {
background:green;
}
#four {
background:#393939;
}
span {
  position:fixed;
  border:1px solid #bbb;
  padding:10px;
  background:rgba(255,255,255,.5);
  color:#eee;
  top:30px;
  cursor:pointer;
}
#left {
 left:10px;
}
 #right {
 left:475px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="round">
    <div id='one'>1</div>
    <div id='two'>2</div>
    <div id='three'>3</div>
    <div id='four'>4</div>
    <span id='left'>&lt;</span>
    <span id='right'>&gt;</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以像这样修改代码。当您到达left==-15时，您会考虑添加左侧添加的新元素的宽度，然后滚动。您在右侧执行相同的操作但删除而不是添加：

$("#left").click(function() {
  var left = $("#round").scrollLeft() - 15;
  if (left == -15) {
    $("#round div:last-of-type").remove().prependTo("#round");
    left = $("#round").scrollLeft() + $("#round div").width() - 15;
  }
  $("#round").scrollLeft(left);
});

$("#right").click(function() {
  var left = $("#round").scrollLeft() + 15;
  if (left == 315) {
    $("#round div:first-of-type").remove().appendTo("#round");
    left = $("#round").scrollLeft() - $("#round div").width() + 15;
  }
  $("#round").scrollLeft(left);
});

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}


/* optional: show position indicator in red */

::-webkit-scrollbar-thumb {
  background: transparent;
}

#round {
  max-width: 500px;
  max-height: 100px;
  width: 500px;
  height: 100px;
  border: 1px solid #bbb;
  overflow: auto;
  display: -webkit-inline-box;
  position: relative;
}

#round div {
  width: 200px;
  height: inherit;
}

#one {
  background: red;
}

#two {
  background: pink;
}

#three {
  background: green;
}

#four {
  background: #393939;
}

span {
  position: fixed;
  border: 1px solid #bbb;
  padding: 10px;
  background: rgba(255, 255, 255, .5);
  color: #eee;
  top: 30px;
  cursor: pointer;
}

#left {
  left: 10px;
}

#right {
  left: 475px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="round">
  <div id='one'>1</div>
  <div id='two'>2</div>
  <div id='three'>3</div>
  <div id='four'>4</div>
  <span id='left'>&lt;</span>
  <span id='right'>&gt;</span>
</div>