モバイルデバイスでインラインスクロールを実装するための4つのソリューションの詳細な説明

ニーズの発見

領域の一部のみスクロールでき、残りの部分は移動できない場合、どのような方法を使用しますか?

まず、この要件を解決すべき 2 つの小さな問題に分解することができます。

• 一部エリア固定
  
• 残りのエリアはスクロールします
  

一部エリア固定

1. ページ本体に height: 100% と overflow: hidden を設定すると、ページのネイティブ スクロールが無効になり、コンテンツが 1 画面だけ表示されるようになります。
   
2. 固定領域では絶対位置を使用します。
   

残りのエリアはスクロールします

コア属性オーバーフロー-y

MDN の overflow-y の定義

overflow-y プロパティは、ブロックレベル要素が上端と下端からあふれたときに、コンテンツをクリップするか、スクロール バーをレンダリングするか、またはオーバーフロー コンテンツを表示するかを指定します。
overflow-y プロパティは、ブロックレベル要素が要素の上部または下部でオーバーフローした場合に、コンテンツを切り取ってスクロールバーをレンダリングするか、オーバーフローしたコンテンツを表示するかを指定します。

簡単に言うと、overflow-y プロパティが垂直方向にオーバーフローする場合、値が異なるとパフォーマンスが異なります。スクロール機能を実装するには、このプロパティを scroll に設定する必要があります。その後、ブロックレベル要素のコンテンツがオーバーフローしているかどうかに関係なく、ブラウザはスクロールバーを生成し、コンテナーのオーバーフロー部分を非表示にします。オーバーフロー部分はスクロール後にのみ表示されます。

例えば：

 。テスト{
  幅: 200ピクセル;
  /* キースタイル */
  高さ: 200px;
  overflow-y: スクロール;
  /* 以下のスタイルは無関係です*/
  背景: #f14c5c;
  色: #fff;
}
<div class="test">
  これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。これは単なるテストコンテンツです。</div>

効果図は以下のとおりです。

今の例から、ブロックレベル要素の高さが制限されている限り、他のコンテンツに影響を与えずに要素のコンテンツのみをスクロールできるようにすることが自然であると結論付けることができます。しかし、実装プロセス中に、設計図面の正確な復元をどのように達成するかという新たな問題が発生しました。

設計図は以下のとおりです。

ポップアップ ボックス全体の高さはページの高さに適応します。タイトル部分と下部のボタン部分の位置は固定されています。中央のリストは残りの高さを占める必要があり、コンテンツはスクロール可能です。ポップアップ全体は最も外側の div で囲まれ、下部のボタンはそれに相対的に配置されます。考えた結果、4つの解決策を試し、皆さんと共有しました。

ソリューションの説明

私たちが決定する必要がある中心的な問題は、中央のコンテンツの高さ、つまりさまざまな画面サイズでの正確な高さです。

ヴ

ビューポートの高さを基準に、ビューポートは 100 単位に均等に分割されます。つまり、1vh はビューポートの高さの 1% に相当します。

しかし、vhユニットはAndroidとiOSの下位バージョンを十分にサポートしておらず、WeChatブラウザX5カーネルもサポートしていません。blinkカーネルにアップグレードされましたが、すべてが完璧であることを保証するために、このソリューションは放棄されました。また、下部のボタンの余白を正確に制御する方法はありません。

身長パーセンテージ

vhと同様に、下部ボタンの余白を正確に制御することは不可能であり、適応効果は良くありません。

計算

calc 計算プロパティは、上記の 2 つのソリューションの問題を非常にうまく解決できます。中央部分を正確に埋め、下部のボタンとの余白を維持するには、height:calc(100% - 60px) を設定するだけです。

残念ながら、Android ブラウザ、iOS ブラウザ、WeChat ブラウザを含む主流ブラウザの下位バージョンに対するサポートは貧弱であるため、放棄せざるを得ません。
互換性が優れている場合、calc ソリューションは最も便利でエレガントな実装になるはずです。

js

これは CSS だけでは実現できないため、JS を使用してコンテンツに必要な高さを動的に計算して設定するしかありません。同時に、この方法では互換性の問題が発生することはほとんどなく、段階的な劣化の実践となります。

話題外

醜いスクロールバーを非表示にします。

overflow-y:scroll を直接設定すると、iOS では常に醜いスクロール バーが表示されます。要素には次のプロパティを設定できます。

右マージン: -20px;
右パディング: 20px;

スクロールバーにちょっとしたハックを加えるだけで、スクロールバーが再び表示されることはなくなり、ユーザー操作はネイティブスクロールと同じように感じられるようになり、エクスペリエンスが向上します。

@prototype webkit browser::-webkit-scrollbar のプライベート プロパティを設定すると、スクロール バーをより柔軟に制御できることを思い出させてくれてありがとうございます。単に非表示にする必要がある場合は、次のコードで十分です。

 ::-webkit-スクロールバー{
  表示: なし
}

ほとんどのモバイル ブラウザーは WebKit カーネルを使用していますが、結論を出す前に実際のデバイスでテストする必要があります。一部のブラウザーがこのプロパティをサポートしていない場合でも、上記の小さなハックを使用できます。

-webkit-overflow-scrolling: タッチ

iOS デバイスでは、オーバーフローを使用してスクロールをシミュレートすると、遅延が発生する可能性があります。これは、-webkit-overflow-scrolling: touch を設定することで解決できます。これは、これを設定すると、iOS が UIScrollView を作成し、ハードウェアを使用してレンダリングを高速化するためです。

この問題自体は複雑ではなく、要件が変更された後でも実装は非常に簡単になります。しかし、この小さな例を通して、フロントエンド担当者全員がニーズを考える際に、より多様な問題解決方法を思いつくようになることを願っています。互換性などの理由で一時的に実現できない場合でも、この過程で得られる成長も非常に有益です。

要約する

上記がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションを取ることができます。