使用按钮的Jquery水平滚动答案

【问题标题】：Jquery horizontal Scroll using buttons使用按钮的Jquery水平滚动
【发布时间】：2014-07-30 02:54:57
【问题描述】：

我正在尝试使用按钮获得水平滚动。

我有一个容器，其中有几个水平堆叠的 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

我已经尝试了我在网上找到的解决方案。但是即使我正在尝试修复它，我的容器也会不断移动。

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：

没有内容可滚动时如何禁用按钮？
@Venkat 这个答案已经超过 5 年了。但是，由于我仍然经常使用 StackOverflow，所以我注意到了这个问题。您可以只检查#content 框的宽度，如果它大于.internal 的宽度，请禁用按钮。在这里检查：jsfiddle.net/4d9uoe85 - 尝试删除 .internal 元素，直到只剩下 3 个，当你重新运行它时它应该禁用按钮。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：