title: YouTube like horizontal scroll div
body: <p>I am trying to achieve a horizontal scroll div section with arrow marks for (right and left) scrolling.</p>
  <p>What I achieved is scrolling but it is infinite scrolling, scrolling should stop after the end has reached.</p>
  <p>What I tried so far:</p>
  <pre><code>&lt;div class=&quot;scrollleft&quot; style=&quot;float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;&quot;&gt;LEFT&lt;/div&gt;
      &lt;div class=&quot;container scrollbar&quot;
      style=&quot;white-space: nowrap; overflow-x: hidden; overflow-y: hidden; width:100%;&quot;&gt;
         &lt;div &gt; some content &lt;/div&gt;
          &lt;div &gt; some content &lt;/div&gt;
          &lt;div &gt; some content &lt;/div&gt;
          &lt;div &gt; some content &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;scrollright&quot; style=&quot;float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;&quot;&gt;RIGHT&lt;/div&gt;
  </code></pre>
  <p>Script :</p>
  <pre><code>$('.scrollright').click(function() {
  
    event.preventDefault();
    
    $('.scrollbar').animate({
      marginLeft: &quot;-=200px&quot;
    }, &quot;fast&quot;);
   });
  
  $('.scrollleft').click(function() {
    event.preventDefault();
    $('.scrollbar').animate({
      marginLeft: &quot;+=200px&quot;
    }, &quot;fast&quot;);
   });
  
  });
  </code></pre>