Javascript - 让div随按钮滑动

Question

我在汽车图片周围创建了一个容器，并使用 overflow-y:scroll 这样我就可以滚动它们。我怎样才能做到这样，我有两个可以单击的按钮，这样我就可以通过 javascript 或 jquery 使用按钮滚动它们？

当前 html 是:

<div  class="event_container">

            <a href="/index.php?con=events&id=5">
        <div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
            <p>Kør med de store!</p>
            <p>18-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=3">
        <div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
            <p>Den nye FIAT 500!</p>
            <p>24-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=1">
        <div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
            <p>Event 1</p>
            <p>30-04-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=2">
        <div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
            <p>Test kør bughatti!</p>
            <p>03-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=4">
        <div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
            <p>Skal du køre suziki?</p>
            <p>30-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>

Answer 1

您可以使用 jQuery 制作 Action 动画，以便更轻松地处理移动的图像。尝试下面的示例:

var outer = $('.container');

$('#right').click(function() {
   outer.animate({scrollLeft: '+=30px'}, 500);
});

$('#left').click(function() {
   outer.animate({scrollLeft: '-=30px'}, 500);
});

$('#top').click(function() {
   outer.animate({scrollTop: '-=30px'}, 500);
});

$('#bottom').click(function() {
   outer.animate({scrollTop: '+=30px'}, 500);
});

.container {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

.inner {
  width: 300px;
  background-color: red;
  font-size: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div  class="container">
  <div class="inner">
    A B C D E F G 1 2 3 4 5 6 7 8 9
    -------------------------------
    9 8 7 6 5 4 3 2 1 A B C D E F G
  </div>
</div>

<button id="left"> < </button><button id="right"> > </button>
  
<button id="top"> ^ </button><button id="bottom"> V </button>