JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="target">
  <div id="sample">
    <p>あいうえお。カキクケコ。さしすせそ。タチツテト<br></p>
  </div>
</div>
<button onclick="countScroll();">スクロール量確認</button>
<div>スクロール量：<span id="output"></span></div>

CSS

#target {
  overflow: scroll; 
  width: 100px;
  height: 100px;
}
#sample {
  width: 500px;
  height: 100px;
  background-color: yellow;
}

JavaScript

function countScroll(){
  var target = document.getElementById('target');
  var x = target.scrollLeft;
  document.getElementById('output').innerHTML = x;
}