PPP's Blog

雑コード帳

トップ > JavaScript > スクロール関連の書き方：jQueryとVanilla JSで比較

スクロール関連の書き方：jQueryとVanilla JSで比較

JavaScript

やること

  • このサイトにあることを実行したいが、jQueryではなくVanilla JSで実装したい

スマホでも動く！スクロール判定でCSSアニメーションの作り方 | 株式会社Cruw（クルー）

  • サイト内に出てくるjQueryのコードをVanillaに置き換えつつ、何をやっているコードなのかを知りたい
  • ※jQueryのメソッドでないものは最初に※と表記します。

さっそく

.scrollTop() - 現在のスクロール位置を取得

jQuery

var scroll = $(window).scrollTop();

Vanilla

var scroll = document.scrollingElement.scrollTop;

※上記はクロスブラウザ対応が必要なためもっと複雑になる

function bodyOrHtml() => {
    if ('scrollingElement' in document) {
        return document.scrollingElement;
    }
    // Fallback for legacy browsers
    if (navigator.userAgent.indexOf('WebKit') != -1) {
        return document.body;
    }
    return document.documentElement;
}

参考

.height() - 要素の高さを取得

jQuery

var windowHeight = $(window).height();

Vanilla

var windowHeight = window.innerHeight;

参考

.offset() - documentを起点にした位置情報を取得する

documentの左上を起点にtopとleftの値を取得する。

jQuery

var myTop = $("#main").offset().top;

Vanilla

var myMain = document.getElementById("main");
var rect = myMain.getBoundingClientRect();
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var myTop = rect.top + scrollTop;

Vanillaになると複雑になりました。 これが何をやっているかを一行ずつ見ます。

参考

.getBoundingClientRect() - 要素の位置座標・寸法を取得する※

※ここからはjQueryの.offset().topをVanillaで再現するのに使用するメソッドを見ていきます。

ブラウザの表示領域の左上を起点とする。 返り値のDOMRectオブジェクトは以下のプロパティを持つ。

  • left
  • top
  • right
  • bottom
  • x
  • y
  • width
  • height

参考

.pageYOffset, .scrollTop - 縦方向のスクロール量を取得する

参考

スクロールイベントを取得してスクロール量を表示する

縦スクロールをオンにしたボックス内でスクロールしたときに、スクロール量を取得・表示する

HTML

<div id="main" class="container">
    <div class="box">スクロール可能領域</div>
</div>

CSS

.container {
    border: 2px solid #333;
    width: 100px;
    height: 200px;
    overflow-y: scroll;
}
.box {
    height: 1000px;
}

Vanilla JS

document.querySelector('.container').addEventListener('scroll', (e) => {
    console.log(e.target.scrollTop);
});

参考

アニメーション実装は別エントリで書きます

スクロールイベントを取得するコードが書ける時点で、あとはアニメーションの実装を残すのみとなるが、気力が保たないため次回エントリに譲る。