読者です 読者をやめる 読者になる 読者になる

jQueryでテキストエリア内のスクロールが発生しているか検知する方法

いつの間にか新年になっていました。

あけましておめでとうございます。今年もよろしくお願いします。

 

html上の要素を制御する方法について色々と調べていたら、面白そうなものを見つけました。

jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary

jQuery必須というわけではないですが、意外と多くの情報が取れることがわかりました。

その中に、スクロールバーが存在するボックス要素内の各種height値の取り方です。

今回はわかりやすく、テキストエリア内にスクロールバーがあるかどうかを検知するスクリプトを書いてみました。

テキストエリア内のスクロールが発生しているか検知する方法

テキストエリア内に縦や横のスクロールバーがあると、バーの分だけ幅や高さが変わります。ただ、記事を読む限りではwidthheightの値はpaddingで調整されたあとの内側のサイズを返すようです。

その代わりに、clientHeightpaddingも含めた高さ、offsetHeightborderも含めた高さを取得できるようです。

さらに、scrollHeightはスクロールによって非表示になった部分も含めた高さを取得できるみたいです。

ということは、これらを比較することで要素内にスクロールバーがあるかどうかを検知することができそうです。

実際に動かしてみました。

スクロールバー:出てないよ

 

テキストエリア内で適当に長文や改行を入れてフォーカスを外すと、テキストエリア内にスクロールバーがあるかないかを表示します。

コードはこんな感じ。

$('textarea').blur(function() {
  var ch = $(this).prop('clientHeight');
  var sh = $(this).prop('scrollHeight');
  if (ch < sh) {
    // スクロールバーがあるときの処理
  } else {
    // スクロールバーがないときの処理
  }
});

テキストエリア要素のclientHeightscrollHeightを取得して比較し、scrollHeightのほうが大きい場合にスクロールバーがあると見なしています。

記事中だとattrで取得していましたが、試してみたところpropじゃないと正しく取得できませんでした。jQueryのバージョンなどが関係しているのかもしれません。

 

使い道があるかはわかりませんが、ちょっと面白いと思いました。