LANG SELRCT

コードを書く場所についてはこちら

2019年4月25日木曜日

テキストエリアで一番下までスクロールしたことをキャッチしたい


テキストエリアのデモ



テキストエリア内で一番下までスクロールするとアラートが出ます


Google Apps Script の HtmlService で実現するコードを書きました


コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<body>
  <textarea id='ta'>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</textarea>
<script>
document.getElementById('ta').onscroll = taScroll;

function taScroll(){
  var scrollTop = this.scrollTop;
  var clientHeight = this.clientHeight;
  var scrollHeight = this.scrollHeight;
  var scroll = scrollHeight - clientHeight;
  if(scrollTop === scroll) {
    alert(["scrollTop:"+scrollTop, "scrollHeight:"+scrollHeight, "clientHeight:"+clientHeight, "scroll:"+scroll]);
  }
}

</script>
</body>
</html>

意訳
 



テキストエリア

テキスとエリアでスクロールした時にtaScrollを実行する

この機能がやること
垂直方向にスクロール可能なピクセル数
テキストエリアの見た目の高さ
スクロール可能な部分を含めた全体の高さ
スクロールしたピクセル数
scrollTopがスクロール可能な最大値に達したなら
アラートを表示する









補足

scrollHeight、clientHeight、scrollTop を利用しています

それぞれの関係性がちょっと難しかったので整理してみます
  • スクロールしていないとき scrollTop は 0
  • スクロールすると scrollTop の位置が変わるため数値は変化する
  • scrollTopの最大値は scrollHeight - clientHeight

図にしてみるとたぶんこんな感じかな
個人的にはこういう図が欲しくて探しましたがすぐに見つからず描いてしまった