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

- k91221221

Answer 1

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

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

编辑，要解释...需要设置其滚动左侧位置。

演示PLUNKR

- user1189882

---

当没有滚动内容时，如何禁用按钮？ - Venkat

@Venkat，这个回答已经超过5年了。然而，由于我仍然经常使用StackOverflow，我注意到了这个问题。您只需检查＃content框的宽度，如果它大于.internal宽度之和，则禁用按钮。在这里检查：https://jsfiddle.net/4d9uoe85/ - 尝试删除.internal元素，直到只剩下3个，然后重新运行它，就应该禁用按钮。 - user1189882

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

这是一个关于IT技术的演示链接，它展示了一些技术的实现方法。请点击链接查看演示。

- Vennik

Answer 3

@Vennik的回答确实很棒，

但在我的情况下，我使用了它的不同方式。因为我使用了Material Design，并且正在调用API来显示图像走马灯，所以我是这样做的，

第一部分是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>

- MD Shahrouq