いつの間にか新年になっていました。
あけましておめでとうございます。今年もよろしくお願いします。
html上の要素を制御する方法について色々と調べていたら、面白そうなものを見つけました。
jQuery必須というわけではないですが、意外と多くの情報が取れることがわかりました。
その中に、スクロールバーが存在するボックス要素内の各種height値の取り方です。
今回はわかりやすく、テキストエリア内にスクロールバーがあるかどうかを検知するスクリプトを書いてみました。
テキストエリア内のスクロールが発生しているか検知する方法
テキストエリア内に縦や横のスクロールバーがあると、バーの分だけ幅や高さが変わります。ただ、記事を読む限りではwidthやheightの値はpaddingで調整されたあとの内側のサイズを返すようです。
その代わりに、clientHeightはpaddingも含めた高さ、offsetHeightはborderも含めた高さを取得できるようです。
さらに、scrollHeightはスクロールによって非表示になった部分も含めた高さを取得できるみたいです。
ということは、これらを比較することで要素内にスクロールバーがあるかどうかを検知することができそうです。
実際に動かしてみました。
スクロールバー：出てないよ
テキストエリア内で適当に長文や改行を入れてフォーカスを外すと、テキストエリア内にスクロールバーがあるかないかを表示します。
コードはこんな感じ。
$('textarea').blur(function() {
var ch = $(this).prop('clientHeight');
var sh = $(this).prop('scrollHeight');
if (ch < sh) {
// スクロールバーがあるときの処理
} else {
// スクロールバーがないときの処理
}
});
テキストエリア要素のclientHeightとscrollHeightを取得して比較し、scrollHeightのほうが大きい場合にスクロールバーがあると見なしています。
記事中だとattrで取得していましたが、試してみたところpropじゃないと正しく取得できませんでした。jQueryのバージョンなどが関係しているのかもしれません。
使い道があるかはわかりませんが、ちょっと面白いと思いました。
