😽

ホットリロードでオートスクロール

2021/08/26に公開

CSS

JavaScript

tech

できごと

ページの表示がファイル読み込みのたびに先頭まで戻るのがいや。

ここまではできたとする

エディタでテキストを書いて保存すると、いい感じに変換されたHTMLファイルが生成されて保存される。
HTMLファイルの変更を検知してページが再読み込みされる。

たぶんそこで起こること

エディタで作成するテキストが長くなっていったとき、エディタではスクロールが行われるが、ホットリロードされる表示側では、相変わらず冒頭から表示されている。反映結果を確かめるためにいちいちスクロールが必要。

方針

編集中のテキストからHTMLが生成されるときに、現在の編集箇所を示すタグを仕込んでおく。
ページの javascript を利用して、表示されるページをスクロールさせる。

やってみる

編集しているテキストのカーソル位置を、<span id="cursor"></span>で入れてやる。

long_text_html

<script type="text/javascript" src="./scroll.js"></script>
<style>
  #box{
    width: 200px;
    height: 200px;
    border: 2px solid;
    overflow: hidden;
  }
</style>

long_text_html

<body>
  <article id="box">
    たとえば、こう、長い長いテキストがあったとする。
    それはもうとても長く長く長くて、
    スクロールなにしは読めないほどに長いのである。
    とてつもなく長い。
    べらぼうに長い。もういやになるくらい長い。
    とんでもなく長いのでこまる。
    ということを書いてみる。
    とても困る程度には長い。
    どうしよかっていうほどに<span id="cursor"></span>長く長く長く長いのである。ほんとのことよ。っていうことよそうなんだよ。
  </article>
</body>

この<span id="cursor"></span>を、javascrpt で拾ってやる。
コンソールに表示されるカーソル位置と、枠の座標を睨みつつ、好みに調整する。

スクロールさせる。
前回と同じ位置に固定する。
ページが変わったら切り替える

など。

scroll.js

window.onload = function(){
  var content = document.getElementById("box");
  var cursor = document.getElementById("cursor");
  var rect = cursor.getBoundingClientRect();
  var box = content.getBoundingClientRect();

  if(true){
      console.log("rect.top: " + rect.top);
      console.log("rect.bottom: " + rect.bottom);
      console.log("rect.right: " + rect.right);
      console.log("rect.left: " + rect.left);
      console.log("box.top: " + box.top);
      console.log("box.bottom: " + box.bottom);
      console.log("box.right: " + box.right);
      console.log("box.left: " + box.left);
  }

  //たとえばこういう操作で調整
  if (rect.top > 200){               
    content.scrollTop = rect.top - 200 + box.top - 2; 
  }
};

コード

https://github.com/EnJoeToh/auto-scroll