[JS30] - 13) Slide in on Scroll

2304 ワード
innerHeight offsetTop scrollY coordinates テキストリンク

画像を表示するためにスクロール

const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;

window.scrollY


スクロールの垂直度をピクセルで表し、より正確には、スクロールYは現在のビューポートの上のエッジのY座標を返します.

window.innerHeight


水平スクロールバーの高さを含むウィンドウの内側の高さ

画像が半分表示されているかどうかを判断します

const isHalfShown = slideInAt > sliderImage.offsetTop;

HTMLElement.offsetTop



スクロールされているかどうかを確認

const isNotScrolledPast = window.scrollY < imageBottom;

画像の半分以上を表示し、スクロールしていない場合は画像を表示します

        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });

すべての座標と関数の表示



Reference

  • https://ko.javascript.info/size-and-scroll
    • coreseek/sphinxドキュメントの概要
    符号化、復号化、乱符号化、トランスコードの理解.