Google Apps Script試行錯誤 Blog: テキストエリアで一番下までスクロールしたことをキャッチしたい

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 を利用しています

それぞれの関係性がちょっと難しかったので整理してみます