JavaScript

scrollLeftで要素内の横スクロール量を取得する【JavaScript】

この記事では、scrollLeftを使って、要素内での横方向(左)スクロール量を取得と、指定のスクロール位置まで移動をしていきます。

scrollLeft

使い方

element.scrollLeftという形式で使います。

横スクロール量を取得する【デモ】

横スクロール量を取得してみます。

左にスクロールして「スクロール量確認」ボタンをクリックすると、左スクロール量が表示されます。

サンプルコード

<div id="target">
  <div id="sample">
    <p>あいうえお。カキクケコ。さしすせそ。タチツテト<br></p>
  </div>
</div>
<button onclick="countScroll();">スクロール量確認</button>
<div>スクロール量:<span id="output"></span></div>
#target {
  overflow: scroll; 
  width: 100px;
  height: 100px;
}
#sample {
  width: 500px;
  height: 100px;
  background-color: yellow;
}
function countScroll(){
  var target = document.getElementById('target');
  var x = target.scrollLeft;
  document.getElementById('output').innerHTML = x;
}

target.scrollLeftでスクロール量を取得し、innnerHTMLで表示しています。

指定した横スクロール位置へ移動【デモ】

指定の横スクロール位置に移動させてみます。

「移動」ボタンをクリックすると、左スクロール量が「50」ずつプラスされていきます。

サンプルコード

<button onclick="moveScroll();">移動</button>
<div id="target">
  <div id="sample">
    <p>あいうえお。カキクケコ。さしすせそ。タチツテト<br></p>
  </div>
</div>
#target {
  overflow: scroll; 
  width: 100px;
  height: 100px;
}
#sample {
  width: 500px;
  height: 100px;
  background-color: yellow;
}
function moveScroll(){
	var target = document.getElementById('target');
	target.scrollLeft += 50;
}

target.scrollLeft += 50でスクロール量が50ずつプラスされます。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5