JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
スマートフォンのブラウザでスクロール時に発生するresizeイベント（そしてウィンドウの縦幅に要素の高さをあわせた場合の問題）に関するメモ - Qiita
スマートフォンのブラウザではスクロールするとアドレスバー等が自動で隠れるという動作が一般的ですが、これによってウィンドウの縦幅が変化することがあるので、それについて簡単にメモしておきます。 色々と調査できる余地があるのですが、いったん現時点でわかっていることを記録しておきます。後日加筆するかもしれません。 なお、マイナーバージョンや端末などの違いによって以下とは異なる結果になる可能性もあります。 1．ブラウザによってイベントが発生することもあればしないこともある iOS（確認バージョンは8.3）のSafari、Android（確認バージョンは4.4.4。端末はSO-02G）の標準ブラウザ＆Chromeでは、ページを下にスクロールしてアドレスバー等のナビゲーション表示が消えるときに resize イベントが発生しました。 ただし、上記3つのブラウザのうち、 Android の Chrome
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
簡単！無限スクロールの実施方法 – サイト最下部までスクロールでtopへ移動 | Stronghold Archive
どうもこんにちは！今日のtipは【無限スクロールの実施方法】です。基本構成はシンプルです。現在のスクロール位置がコンテンツの高さを超えた時、最上部へ自動的に移動するだけです。最近よく見かけるようになったスタイルです。 コード HTML <div id="scrollArea"> <!– ここにコンテンツを記述します。 –> </div> jQuery <script type="text/javascript"> $(function(){ $(window).scrollTop(0,0); var windowH = $(‘#scrollArea’).innerHeight(); $(window).scroll(function(){ var bodyH = $(window).height(); var scroll = Math.floor($(this).scrollTop())
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
