ホームページ >ウェブフロントエンド >CSSチュートリアル >弾性オーバーフロースクロール

弾性オーバーフロースクロール

William Shakespeareオリジナル: 2025-03-08 12:00:19558ブラウズ

Elastic Overflow Scrolling

多くのモバイルデバイスには、輪ゴムのようなスクロール効果があり、ユーザーがビューポートの端を越えて距離をスクロールできるようになり、手放した後、ページは元の位置にリバウンドします。この効果は、iOS Safariなどのほとんどのブラウザで自動的に実装されます。ただし、この「輪ゴム」のスクロール効果を達成し、タッチ以外のデバイスと互換性があることは簡単ではありません。この効果を制御するためのCSSには直接的なプロパティはありません。非標準-webkit-overflow-scrollingプロパティはありますが、異なる運動量スクロールに使用されます。

このラバーバンド効果を強制する必要がある場合は、通常、JavaScriptを使用してスクロールリスナーを追加するか、pointerDown、pointerUp、pointerMoveイベントを使用し、位置と慣性運動などを追跡する必要があります。しかし、これはより複雑です。

理想的には、純粋なCSSソリューションを使用したいと思います。

複数の子要素を持つ容器を検討してください：

<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

最初に、親の容器がオーバーフローすることを確認するために、いくつかの基本的なスタイルを設定してください。

/* 父容器，设置固定尺寸以产生溢出 */
.carousel {
  width: 200px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 子元素容器，垂直排列 */
.slides {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
}

/* 每个子元素占据容器全宽 */
.slide {
  width: 100%;
  aspect-ratio: 1;
}

キーは、子要素に垂直マージンを追加することです。コンテナに長い要素が1つしかない場合、その要素の上部と下部にマージンを追加します。

この方法で、エッジを越えてスクロールできます。リバウンド効果を達成するためには、

および

.carousel > .slides > .slide:first-child {
  margin-top: 100px;
}

.carousel > .slides > .slide:last-child {
  margin-bottom: 100px;
}

プロパティを使用する必要があります。

scroll-snap-type水平スクロール要素の場合、要素の左と右のエッジにマージンを適用し、scroll-snap-align属性の値を

から

.carousel {
  scroll-snap-type: y mandatory;
}

.carousel > .slides > .slide {
  scroll-snap-align: start;
}

.carousel > .slides > .slide:first-child {
  margin-top: 100px;
}

.carousel > .slides > .slide:last-child {
  scroll-snap-align: end;
  margin-bottom: 100px;
}

に変更します。

scroll-snap-typeこれがすべてです！これは、シンプルで効果的な純粋なCSSソリューションです。 y mandatory x mandatory

弾性オーバーフロースクロール

関連記事