How to smoothly scrolling in adding element?

Question

I making infinite scroll box by clicking two arrow ! I do each scroll by adding/subtracting 15px . I detected the scroll left min and max value for making infinite scroll by adding existed element , but its scroll range is not going to 15.It is scrolling to the whole div width . How can I make it scrolling to 15 (px) after I added element (not its element width) ?

$("#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);
});

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

Answer 1

You may modify your code like this. When you reach the left==-15 you consider adding the width of the new element you add in the left and then you scroll. You do the same in the right but you remove instead of adding :

$("#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>