要素をスムーズにスクロールする方法は？

Question

2つの矢印をクリックして無限のスクロールボックスを作っています！ 15pxを追加/減算することで、各スクロールを行います。スクロールが存在した要素を追加して無限スクロールを行うためのminとmaxの値を残していたが、そのスクロール範囲は15にはありません。div幅全体にスクロールしています。要素（要素の幅ではない）を追加した後、どのようにして15（px）にスクロールさせることができますか？

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

あなたはこのようにコードを変更することができます。 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>