jQuery单击事件中的水平滚动问题

Question

我在水平滚动div中有一些项目。我正在尝试在某些单击事件上向左和向右滚动滚动。我做了一些编码，但是完成滚动后，在单击事件上占用了额外的空间，请检查。

$('.btnleft').click(function() {
  event.preventDefault();
  $('.PaymentScroll').animate({
    scrollLeft: "-=198px"
  }, "slow");
});

$('.btnright').click(function() {
  event.preventDefault();
  $('.PaymentScroll').animate({
    scrollLeft: "+=198px"
  }, "slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="btn-left"></span>
<span class="btn-right"></span>
<div class="scrollDiv">
  <div class=internal>
    div 1
  </div>
  <div class=internal>
    div 2
  </div>
  <div class=internal>
    div 3
  </div>
  <div class=internal>
    div 4
  </div>
</div>