2020.08.17

ボタンクリックで横スクロールを移動させる方法

1. デモ

2. 作り方

このデモでは、scrollLeft を使って、要素内の横スクロールを、ボタンクリックで指定の位置まで移動できるようにしています。scrollLeft があるなら scrollRight があるかと思いましたがないようなので、プラスとマイナスで左右の移動を指定しています。

<p id="out">scrollLeft:</p>
<div id="scrollArea">
  <div id="inner">scroll -&gt; -&gt; -&gt;</div>
</div>
<button type="button" id="left">left</button>
<button type="button" id="right">right</button>

#scrollArea {
  width: 200px;
  overflow: auto;
  border: solid 1px #aaa;
}
#inner {
  width: 2000px;
  height: 40px;
}

$(function () {
  //スクロールの数値を表示
  $("#scrollArea").scroll(function () {
    $("#out").text("scrollLeft: " + $(this).scrollLeft())
  })
  //ボタンを押すと右に0.3秒かけて500px移動
  $("#right").click(function () {
    $("#scrollArea").animate(
      {
        scrollLeft: $("#scrollArea").scrollLeft() + 500,
      },
      300
    )
    return false
  })
  //ボタンを押すと左に0.3秒かけて500px移動
  $("#left").click(function () {
    $("#scrollArea").animate(
      {
        scrollLeft: $("#scrollArea").scrollLeft() - 500,
      },
      300
    )
    return false
  })
})

「500」の部分が移動距離、「300」の部分が移動するまでの時間を指定しています。スクロールの数値の部分は動作には影響していないので削除して大丈夫です。