先日遭遇したJavaScriptでの現象について。
タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。
何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。
で、こちらの問題の解決にあたって、下記の記事が参考になりました。
document.body.scrollTopが常に0を返す謎を調べてみた – Qiita
https://qiita.com/tkengo/items/ee758c75ba874757b7fd
この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。
#sample {
overflow-y: auto;
width : 300px;
height: 200px;
}
width と height の値は任意です。
現状にあった値に適宜変更してください。
上記を指定することで、id='sample' の要素がスクロール可能な範囲となり、無事 scrollTop の値を取得することができるようになりました。
なお、HTML と JavaScript のサンプルコードは下記のとおりです。
JavaScript はボタン押下時など、任意のタイミングで実行してください。
<body>
<div id='sample'>
<!-- 要素の中身を記入 -->
</div>
</body>
var element = document.getElementById('sample');
var scroll-top = element.scrollTop;
以上、JavaScript の scrollTop が効かない時の対処法でした。
JavaScript というよりも、CSS の修正でしたが、ご参考になれば幸いです。
