追いかける縦線デモ

/*
* petit_chasedown（ぷちっ ちぇいすだうん）と呼称するものとする
*
*	スクロールで縦線を描画
*	用途としてはタイムラインリスト（変遷）等に向いている
*
*	・ULタグとLIタグの組み合わせて用いる
*	・ULタグは複数でも可でCSSクラス名で指定（config中のchaseList）にて、CSSに下記を指定する
*		max-width: 400px;
*		width:100%;
*		margin:50px auto;
*		padding:0 30px;
*	・LIタグのCSSには下記の通り指定する
*		position: relative;
*		list-style: none;
*		padding:0 0 20px 0;　　※これはデザインに応じて
*	・LIタグ中にコンテンツブロックを書く
*		position: relative;
*		margin:0 0 20px 3em;	※左のパディングを下記の線引に重ならないようにする
*	・LIタグ中に線引用のブロックをクラス名で指定（config中のchaseLine）して、上記のコンテンツに重なるように配置
*		position: absolute;
*		left: 6px;	
*		top: 0;
*		width: 3px;
*		height:0;
*		background: rgb(70,95,171);
*	・LIタグに●を表示する
*		timeline li::after{
*		content:'';
*		position: absolute;
*		top:0;
*		left:0;
*		width: 15px;
*		height: 15px;
*		background: rgb(70,95,171);
*		border-radius: 50%;
*
*	・当該モジュールをimportしてインスタンス化するだけ
*	・class(Prototype糖衣構文)で複数属性の設定可
*	
*	SP Thx. 元ネタはこれです
*		スクロールをするとタイムラインの縦線が伸びる
*		https://coco-factory.jp/ugokuweb/move01/9-1-6/
*		※元ネタに改変してこと		
*		・jQuery依存をなくしてモジュール化
*		・ULとLIタグの縛りを無してブロック要素ならOKに
*
*	license: MIT
*	author: booskanium
*
*/
export default class __Petit_chasedown {
	//Tipsポップアップ欄の初期設定
	constructor(cnf) {
		this.config = {
			chaseList: 'chaseList',		// 追いかけ線表示するブロック全体 
			chaseItem: 'chaseItem',		// 追いかけ線表示するアイテムブロック
			chaseLine: 'chaseLine',		// アイテムブロックに被せて追いかけ線表示するインラインブロック
			startPoint: 150 
		}
		// 独自設定を受け入れる設定
		if (cnf) {
			if ('chaseList' in cnf) this.config.chaseList = cnf.chaseList;
			if ('chaseItem' in cnf) this.config.chaseItem = cnf.chaseItem;
			if ('chaseLine' in cnf) this.config.chaseLine = cnf.chaseLine;
			if ('startPoint' in cnf) this.config.startPoint = cnf.startPoint;
		}
		// 画面をスクロールをされた場合
		window.addEventListener('scroll', () => {
			this.drawLine_scrolling();
		});
		// ページが読み込まれたら
		window.addEventListener('load', () => {
			this.drawLine_scrolling();
		});
	}
	//スクロール位置に応じて線引する
	drawLine_scrolling() {
		let CL = document.getElementsByClassName(this.config.chaseList);
		CL = Array.from(CL);	//HTMLCollectionを配列に変換
		CL.forEach((cl) => {
			let CI = cl.getElementsByClassName(this.config.chaseItem);		//chaseList中のchaseItem要素の一覧
			CI = Array.from(CI);	//HTMLCollectionを配列に変換
			CI.forEach((ci) => {
				let windowHeight = window.innerHeight;		// windowの高さ取得
				let scroll = window.scrollY;				// スクロール値取得
				let elemPos = ci.offsetTop;					// liのY軸オフセット
				let startPoint = this.config.startPoint;	// 線をスタートさせる位置を指定
				if (scroll >= elemPos - windowHeight - startPoint){				
					//余白含めた高さ
					let margin = this._getMargin(ci);
					var H = ci.offsetHeight + margin.top + margin.bottom;
					//スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセント
					var percent = (scroll + startPoint - elemPos) / (H/2) *100;
					// 線引の長さが100% を超えたら100%
					if(percent > 100){
						percent = 100;
					}
					// 線引の長さがマイナス値だったら0%
					if(percent < 0){
						percent = 0;
					}
					// 線引を行う
					let line = ci.getElementsByClassName(this.config.chaseLine);
					line = Array.from(line);
					line = line[0];
					line.style.height = percent + "%";
				} 
			});
		});
	}
	//Marginを求める
	_getMargin(elm) {
		let styles = window.getComputedStyle(elm);
		return {
    		top: parseFloat(styles.marginTop) || 0,
    		right: parseFloat(styles.marginRight) || 0,
    		bottom: parseFloat(styles.marginBottom) || 0,
    		left: parseFloat(styles.marginLeft) || 0,
		}
	}
}