DOM の新仕様として、スクロールのパフォーマンスを改善するためにaddEventListenerに Passive Event Listeners というオプションが追加された。 Scroll Jank ページのスクロール時に発生する（スクロールが詰まったような）遅延を「Scroll Jank」と呼ぶ。 こういった Scroll ...

こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。今回のテーマは 「スクロール」 に関するモダンな機能群です。 ブラウザ上でスクロールに絡む機能を実装しようとすると、考慮すべき点や制約は多くなります。 たとえば ...

Webサイトの表現において、ユーザーの操作に呼応するインタラクションは、没入感を高める非常に重要な要素です。中でも「スクロール」に連動した演出は、パララックス効果や追従ヘッダー、あるいは記事の読了率を示すプログレスバーなど、多くの場面 ...

ページのスクロールの滑らかさが損なわれると UX の低下に繋がる。 スクロールイベントの最適化 スクロールイベントは発生頻度が多いため、実装内容によっては Scroll Jank を引き起こす可能性がある。 イベント内でpreventDefault()が呼ばれている可能性がある ...

完全なソースコード、スクロールロック機能の実装サンプル、および「効かない」時の対処法は、以下のブログ記事にて公開しています。 【JavaScript】preventDefaultによるブラウザ標準動作の無効化とスクロール制御 Webアプリケーションを開発していると ...

トップページは、Masonryに加えて「Infinite Scroll」（無限スクロール）も実装。一般的なInfinite Scrollは下方向のみだが、ここでは上下方向を実現した。14個のセルをワンセットとし、上下方向スクロールの際、新たなデータを取得してフェードアニメーションで ...

jQueryって便利ですよね。特に普段JavaScriptを書かないWebデザイナーにはとっつきやすい書き方が魅力。でも素のJavaScriptを書ければ、もっと軽量で使い勝手のいいスクリプトが作れるかもしれません。 本記事はAdrian Sandu、Chris Perry、Jérémy Heleine、Mallory van ...