スクロールバーにスライダーが表示されているか(JavaScript)
スクロールバーが表示されるかどうか、ではなく、
JavaScriptで「スクロールが可能な状態なのか」を判断したかった。
つまり、「スライダーが表示されているか」が欲しい。
そんなプロパティはない（と思う）ので色々と調べてみたんだけど、出てくる情報は「スクロールバーが表示されているか」ばかりで一向に見つからない。
検索の仕方が悪かったのか……すっごい悩んだ末、全然別のところで偶然やり方を知ったので、ここに書いておく。
htmlの中身そのまま書きました。ボタン押せば、スクロール領域にスライダーが表示されてるかどうかを表示します。
※スクロール領域の高さは画面サイズに合わせて変更される
clientHeight は画面に表示される領域、scrollHeight は実際の中身。
scrollHeight 側が大きい＝スクロールしないと表示されない＝スライダーが表示されている、って感じの判断になります。
JavaScriptで「スクロールが可能な状態なのか」を判断したかった。
つまり、「スライダーが表示されているか」が欲しい。
そんなプロパティはない（と思う）ので色々と調べてみたんだけど、出てくる情報は「スクロールバーが表示されているか」ばかりで一向に見つからない。
検索の仕方が悪かったのか……すっごい悩んだ末、全然別のところで偶然やり方を知ったので、ここに書いておく。
<html>
<head>
<script type="text/javascript">
<!--
function check() {
var cHeight = document.getElementById("sc").clientHeight;
var sHeight = document.getElementById("sc").scrollHeight;
alert("スライダーが表示されている："+((sHeight-cHeight)>0));
}
//-->
</script>
</head>
<body>
<form name="tform">
<div id="sc" style="overflow-y:scroll; width: 200px; height: 50%;">
スライダー表示の確認。
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定。
今回は縦スクロールチェックなので「overflow-y」属性を使ってます。
「scroll」は常に表示、「auto」だとはみ出した時に表示されるようになります。
</div>
<input type="button" name="test" value="test" onclick="check()">
</form>
</body>
</html>
htmlの中身そのまま書きました。ボタン押せば、スクロール領域にスライダーが表示されてるかどうかを表示します。
※スクロール領域の高さは画面サイズに合わせて変更される
clientHeight は画面に表示される領域、scrollHeight は実際の中身。
scrollHeight 側が大きい＝スクロールしないと表示されない＝スライダーが表示されている、って感じの判断になります。