「JavaScript」scrollLeft プロパティで要素の内容が左端からスクロールするピクセル数を取得する
環境
Google Chrome 103.0.5060.114
構文
1.スクロールしたピクセル数を取得します
var sLeft = element.scrollLeft;
sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。
2.スクロールしたピクセル数を設定します
element.scrollLeft = 10;
使用例
<!DOCTYPE html> <html> <style> #cft { width: 200px; height: 150px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 450px; background-color: skyblue; } </style> <body> <div id="cft"> <div id="content">ボタンをクリックすると右へスライドします。</div> </div> <p><button id="check" type="button">検証</button></p> <script> const button = document.getElementById('check'); button.onclick = function () { document.getElementById('cft').scrollLeft += 20; }; </script> </body> </html>
結果
「検証」ボタンをクリックすると右へスライドします。