title: CSS 'snap-scroll' interfering with jQuery '.animate scrollLeft'
body: <p>I have an html and css slider where I'm using <code>scroll-snap</code> for manual scrolling and jQuery buttons for automatic scrolling. However, when using <code>scroll-snap-type: x mandatory;</code>, the jQuery <code>scrollLeft</code> animation becomes extremely laggy or the animation disappears. Where is this lag coming from? Is there a jQuery only solution?</p>
  
  <p>Taking out the css scroll-snap fixes the problem, but the style is necessary to the slider.</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt; 
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="left"&gt;&amp;larr;&lt;/button&gt;
  &lt;button id="right"&gt;&amp;rarr;&lt;/button&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.container {
    max-width: 300px;
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }
  .box {
    min-width: 100%;
    min-height: 250px;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
  }
  .box:nth-child(1) {background: #f55;}
  .box:nth-child(2) {background: #5f5;}
  .box:nth-child(3) {background: #5ff;}
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$("#right, #left").click(function() {
    var dir = this.id=="right" ? '+=' : '-=' ;
    $(".container").stop().animate({scrollLeft: dir+'300'}, 300);
  });
  </code></pre>
  
  <p>Here's a live example: <a href="https://codepen.io/tystrong/pen/rboLYz" rel="noreferrer">https://codepen.io/tystrong/pen/rboLYz</a></p>