51歳からのプログラミング 備忘 scroll

以下は、超個人的な備忘メモで、他の人は参考にならないです。ごめんね。

divにscrollを付け、コメントを追加したら、スクロールの最期を表示する、という仕様を作ったときに、すごくはまった。

scrollHeightの値を取得できなかった

結局以下のようにして解決したよ。こんなところで躓くなんて初心者道まっしぐら。

div要素にoverflow:scrollを設定し、div要素にspan要素を追加していき、追加されたspan要素に対してスクロールアップしていく、って感じです。

１．ディベロッパーツールのElementsで、scrollが設定されてる要素を探す。
２．Sourcesで、scrollHeightを捉えたいコードあたりにブレークポイントを付ける
３．要素objectは、w.fn.init()で表示されてるので、その内容を見てみると、要素objectは{'0','prevObject','__proto__'}。
{'0'}の内容を見てみると、

children
clientHeight
firstChild
innerHtml
innerText
lastChild
lonalName
offsetHeight
offsetLeft
parentElement
scrollHeight
tabIndex
tagName
textContent
など、いろいろなプロパティがある

４．３から、scrollを使ってscrollHeighを捕獲しようとする時は、要素[0].scrollHeightで取得すればいい。

５．けれどね、scrollHeightを捕獲するときでね、要素[0]が存在しないときに、scrollHeightを捕獲しに行くと、コードが止まってしまう。

６．なので、コードが止まらないよう条件分岐する

if(element.length){
   h = element[0].scrollHeight;
   element.parent().scrollTop(h);
}

僕が今回とってもはまった原因は、
・　scrollを設定した要素を、適切に捕捉できなかった
・　scrollを設定した要素（親要素）で、scrollHeightを取得しようとした
　（親要素[0]にもscrollHeightがあるが、なんだか取得できなかった）
・　要素[0].scrollHeightをしたが、要素[0]が存在しなかった
そんなこんなで時間かけました

誰のお役にも立たないメモですみません。超個人的メモとして。