jquery水平滚动使用按钮 [英] Jquery horizontal Scroll using buttons

问题描述

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

请看看我的企图，并告诉我我做错了什么。

p>

 < div class =left> 
 left div 
< button id =left-button> 
向左滑动
< / button> 
< / div> 
< div class =centerid =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> 
向右滑动
< / button> 
 right div 
< / div> 
  

JQUERY：

 < code $（'＃right-button'）。click（function（）{
 event.preventDefault（）; 
 $（'＃content'）。animate（{
 marginLeft：+ = 200px
}，slow）; 
}）; 
 
 $（'＃left-button'）。click（function（）{
 event.preventDefault（）; 
 $（'＃content'）。animate（{ b $ b marginLeft： -  = 200px
}，slow）; 
}）; 
  

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

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

解决方案

  $（ '）;。click（function（）{
 event.preventDefault（）; 
 $（'＃content'）。animate（{
 scrollLeft：+ = 200px 
}，slow）; 
}）; 
 
 $（'＃left-button'）。click（function（）{
 event.preventDefault（）; 
 $（'＃content'）。animate（{ b $ b scrollLeft： -  = 200px
}，slow）; 
}）; 
  

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

DEMO PLUNKR

I am trying to obtain horizontal scroll using buttons.

I have a container which has several divs stacked horizontally and I want to scroll through them using the buttons given.

Please take a look at my attemp and tell me what I am doing wrong.

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

I have tried the solutions that I have found online. But my container keeps shifting even though I am trying to fix it.

解决方案

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

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

Edit, to explain... you need to set its scroll left position.

DEMO PLUNKR

这篇关于jquery水平滚动使用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！