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

Answer 3

@Vennik的答案真的很棒，
但在我的情况下，我使用它有点不同，因为我使用Material Design并正在进行API调用以显示Image Carousal，
我这样做了，
第一部分是Carousel或Slider代码，第二部分是JS代码

<!-- Carousel -->
        <span style="cursor:pointer" id="left-button"><i class="material-icons">keyboard_arrow_left</i></span>&nbsp

        <span style="cursor:pointer" id="right-button"> <i class="material-icons">keyboard_arrow_right</i></span>

    <div class="bill-screens mdl-shadow--4dp" id="offer-pg-cont">

           <?php for($t=0; $t< count($arr_get_a_user['categories']);$t++){?>
            <div class="bill-pic bill-screen">
              <button class="bill_class" id="bill_<?php echo $t ?>"  onClick="display_image()">

                <img class="bill-screen-image" src="<?php echo $btn_img1; ?>">
             </button>

            </div>
           <?php }?>

        </div>

. . . . . . . . .  .

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        // Carausol JS 

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

     $('#left-button').click(function() {
      event.preventDefault();
      $('#offer-pg-cont').animate({
        scrollLeft: "-=200px"
      }, "slow");
   });
    </script>

Jquery水平滚动使用按钮

3 个答案: