javascript - 水平滚动div

Question

如何使用导航按钮向左或向右滚动？

<div class="slider-wrap">
 <div class="slide-wrap">
    <div class="slider-slide-wrap"></div>
    <div class="slider-slide-wrap"></div>
    <div class="slider-slide-wrap"></div>
 </div>
</div>
 <div id="slider-left" class="slider-nav"></div>
 <div id="slider-right" class="slider-nav"></div>

JS

  $("#slider-left").click(function(){
   alert("< clicked.");
 });
 $("#slider-right").click(function(e){
        alert("> clicked.");

    $('.slide-wrap').scrollLeft(5000);
 });

Fiddle

Answer 1

您选择了错误的<div> 。注意选择器:$('.slider-wrap') (不是.slide-wrap)。

$("#slider-left").click(function () {
    $('.slider-wrap').animate({
        scrollLeft: 0
    }, 200);
});

我用过.animate因为您可以获得有关正在发生的事情的视觉反馈(所以我认为使用 animate 对于用户体验来说更好)。这对于 .scrollLeft() 同样有效。不过:

$("#slider-left").click(function () {
    $('.slider-wrap').scrollLeft(0);
});

查看它在 fiddle 中的工作情况