ユーザースクロールアプリケーション（コード）に基づくCSS実装

この記事は、ユーザーベースのスクロール アプリケーションの CSS 実装 (コード) に関する内容です。一定の参考価値があります。必要な友人は参考にしてください。お役に立てれば幸いです。

現在のスクロール オフセットを HTML 要素の属性にマッピングすることで、現在のスクロール位置に基づいてページ上の要素のスタイルを設定できます。これを使用して、フローティング ナビゲーション コンポーネントを構築できます。

これは私たちが使用する HTML で、

は、下にスクロールするときにコンテンツの上に表示する便利なコンポーネントです。

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

まず、「scroll」イベント、document、scrollY をリッスンし、ユーザーがスクロールするたびに現在の位置を要求します。

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

スクロール位置をhtml要素のdata属性に格納します。開発ツールを使用して DOM を表示すると、次のようになります。

これで、このプロパティを使用してページ上の要素のスタイルを設定できるようになります。

/* Make sure the header is always at least 3em high */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* This box-shadow will help sell the floating effect */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

基本的にはこれだけです。下にスクロールすると、タイトルが自動的にページから切り離され、コンテンツの上に表示されます。 JavaScript コードはこれを気にせず、その仕事はデータ属性にスクロール オフセットを入れることです。 JavaScript と CSS の間には緊密な結合がないため、これは良いことです。

主にパフォーマンス分野で、まだいくつかの改善点があります。

しかしまず、ページの読み込み時にスクロール位置が上部にならないようにスクリプトを修正する必要があります。このような場合、タイトルは正しく表示されません。

ページが読み込まれると、現在のスクロール オフセットをすぐに取得する必要があります。これにより、常に現状と同期することが保証されます。

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events
document.addEventListener('scroll', storeScroll);

// Update scroll position for first time
storeScroll();

次に、パフォーマンスの改善について見ていきます。そのscrollY位置をリクエストすると、ブラウザはページ上のすべての要素の位置を計算して、正しい位置を返すようにする必要があります。スクロール操作ごとにこれを強制しないことが最善です。

これを行うには、デバウンス メソッドが必要です。このメソッドは、ブラウザが次のフレームを描画する準備ができるまでリクエストをキューに入れ、その時点でブラウザはページ上のすべての要素の位置を計算します。また起こらないでください。

// The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {
    
    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {
      
      // Call our function and pass any params we received
      fn(...params);
    });

  } 
};

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));

// Update scroll position for first time
storeScroll();

イベントを受動的にマークすることで、スクロール イベントがタッチ操作 (Google マップなどのプラグインと操作するときなど) によってキャンセルされないことをブラウザーに伝えることができます。これにより、ブラウザーはイベントがキャンセルされないことが分かるため、すぐにページをスクロールできるようになります。

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

この記事はここで終了しました。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの CSS ビデオ チュートリアル 列に注目してください。

以上がユーザースクロールアプリケーション（コード）に基づくCSS実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。