Jquery水平滚动使用按钮

Question

我试图使用按钮获得水平滚动.

我有一个容器,它有几个水平堆叠的div,我想用给定的按钮滚动它们.

请看看我的尝试并告诉我我做错了什么.

HTML:

   <div class="left">
      left div
      <button id="left-button">
        swipe left
      </button>
    </div>
     <div class="center" id="content">
      <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 class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
     </div>
    <div class="right">
    <button id="right-button">
        swipe right
      </button>
      right div
    </div>

JQUERY:

  $('#right-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        marginLeft: "+=200px"
      }, "slow");
   });

     $('#left-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        marginLeft: "-=200px"
      }, "slow");
   });

http://plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview

我尝试过在网上找到的解决方案.但即使我正在尝试修复它,我的容器也在不停变换.

Answer 1

$('#right-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

编辑,解释......你需要设置其向左滚动位置.

DEMO PLUNKR

Answer 2

你正在寻找的scrollLeft不是marginLeft:

$('#right-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

演示:http://plnkr.co/edit/ZdCw7IEYdV5YVeGg33oX？p =preview