【JavaScript】scrollTopが効かない時の対処法

村上 著者:村上

【JavaScript】scrollTopが効かない時の対処法

先日遭遇した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;
}

widthheight の値は任意です。
現状にあった値に適宜変更してください。

上記を指定することで、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 の修正でしたが、ご参考になれば幸いです。

  • この記事いいね! (0)

著者について

村上

村上 administrator