LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Thursday, April 25, 2019

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


テキストエリアのデモ



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


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

図にしてみるとたぶんこんな感じかな



Latest post

Extracting data from Google Sheets with regular expressions

Introduction Regular expressions are a powerful tool that can be used to extract data from text.  In Google Sheets, regular expressions ca...