スクロールバーの初期位置を変える

検索しても見つからなかったので記事にしておきます。久しぶりの開発ネタ。

スクロールバーを下の画像のように途中から表示させたい！

CSSで一行追加すれば実現できると思っていたのですが、どうやらそのような設定は無いらしい。
JavaScriptで動的に設定できるので、合わせ技で実現します。

まず、スクロール表示するdivを作ります。

<div id="samplediv">
任意のコンテンツ
</div>

<style>
#samplediv{
    width: 50%; //値は任意
    overflow: scroll;
}
</style>

そして、以下のようにJavaScriptでロード時に位置を設定。
横スクロールならscrollLeft、縦スクロールならscrollTopを使いましょう。

 <script> window.onload = function(){let elm = document.getElementById( "samplediv" );elm.scrollLeft = 500;}</script>

表示すると、上の画像のようにスクロールバーが途中から表示されるようになります。