NEW ARTICLE
kotlin 正規表現を使用して文字列が部分一致で含まれているかを判定する
  1. HOME
  2. javascript
  3. javascript 横スクロール量を取得する

javascript 横スクロール量を取得する

javascript 横スクロール量を取得する

javascriptで、横スクロール量を取得するサンプルコードを記述してます。「scrollLeft」単位は、ピクセル単位で取得されます。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 107.0.5304.107
Javascript サンプル集はこちら

横スクロール量を取得

横スクロール量を取得するには、「scrollLeft」を取得します。

要素.scrollLeft

実際に、取得してみます。「onscroll」でスクロールイベントを取得して、スクロール量を取得します。

<div id="sample" 
style="
height: 200px;
width: 200px;
border: 4px solid;
border-color: green;
overflow: scroll;
"
>mebeemebeemebeemebeemebeemebeemebeemebeemebee</div>

<script>

document.getElementById("sample").onscroll = function(){  
  console.log( document.getElementById("sample").scrollLeft );
};

</script>

実行結果