ホームページ ウェブフロントエンド jsチュートリアル モバイル端末でコンテンツ領域をスクロールするチュートリアルの例

モバイル端末でコンテンツ領域をスクロールするチュートリアルの例

Jun 26, 2017 am 10:23 AM
練習する コンテンツ エリア スクロール 動く

自己的总结的一些方法,如果有什么新的好的方法希望能够交流:

      1.给定位(导航栏)(底部)

        nav{

          position:fixed;

          top:0rem;

        };

        footer{

                         position:fixed;

         bottom:0rem;

        };

但是这个方法会有弊端,在你给nav设置定位时,内容区域就会顶头出现,就需要给内容区域设置定位设置top值nav的高度方可。

2.使用IScroll插件。

   例如:   

      













  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域





底部




3.第三那种弹性盒子:弊端(会改变nav的高さ);














  • コンテンツエリア

  • コンテンツエリア
  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア
  • コンテンツエリア



  • 底部


    以上がモバイル端末でコンテンツ領域をスクロールするチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

appdataフォルダーをDドライブに移動できますか? appdataフォルダーをDドライブに移動できますか? Feb 18, 2024 pm 01:20 PM

appdata フォルダーを D ドライブに移動できますか? コンピューターの使用が普及するにつれて、ますます多くのユーザーの個人データやアプリケーションがコンピューターに保存されています。 Windows オペレーティング システムには、ユーザーのアプリケーション データを保存するために使用される appdata フォルダーと呼ばれる特定のフォルダーがあります。多くのユーザーは、データ管理とセキュリティを考慮して、このフォルダーを D ドライブまたは他のディスクに移動できるかどうか疑問に思っています。この記事では、この問題について説明し、いくつかの解決策を提供します。まず、させてください

iPhone で機密コンテンツの警告を有効にし、その機能について学ぶ方法 iPhone で機密コンテンツの警告を有効にし、その機能について学ぶ方法 Sep 22, 2023 pm 12:41 PM

特に過去 10 年間で、モバイル デバイスは友人や家族とコンテンツを共有する主な手段となりました。アクセスしやすく使いやすいインターフェイスと、画像やビデオをリアルタイムでキャプチャできる機能により、コンテンツの作成と共有に最適です。ただし、悪意のあるユーザーがこれらのツールを悪用して、閲覧に適しておらず、ユーザーの同意を必要としない不要な機密コンテンツを転送することは簡単です。これを防ぐために、iOS17では「センシティブコンテンツ警告」という新機能が導入されました。それとiPhoneでの使用方法を見てみましょう。新しい機密コンテンツに関する警告とは何ですか?またその仕組みは何ですか?前述したように、機密コンテンツの警告は、ユーザーが iPhone などの機密コンテンツを閲覧できないように設計された新しいプライバシーおよびセキュリティ機能です。

Microsoft Edge ブラウザーを 360 ナビゲーションで開くように変更する方法 - 360 ナビゲーションで開くように変更する方法 Microsoft Edge ブラウザーを 360 ナビゲーションで開くように変更する方法 - 360 ナビゲーションで開くように変更する方法 Mar 04, 2024 pm 01:50 PM

Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更するにはどうすればよいですか? それは実際には非常に簡単なので、ここで Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更する方法を共有します。見てください。皆さんのお役に立てれば幸いです。 Microsoft Edgeブラウザを開きます。以下のようなページが表示されます。右上隅にある三点アイコンをクリックします。 「設定」をクリックします。設定ページの左欄にある「起動時」をクリックします。右の列の図に示されている 3 つの点をクリックし ([新しいタブを開く] をクリックしないでください)、[編集] をクリックして URL を「0」(またはその他の意味のない数字) に変更します。次に、「保存」をクリックします。次に「」を選択します。

6000mAhのシリコンマイナスバッテリー! Xiaomi 15Proアップグレードが再びリーク 6000mAhのシリコンマイナスバッテリー! Xiaomi 15Proアップグレードが再びリーク Jul 24, 2024 pm 12:45 PM

7月23日のニュースによると、ブロガーのDigital Chat Stationは、Xiaomi 15 Proのバッテリー容量が6000mAhに増加し、90Wの有線フラッシュ充電をサポートしているというニュースを伝えました。これは、Xiaomiのデジタルシリーズで最大のバッテリーを搭載したProモデルになります。 Digital Chat Stationは以前、Xiaomi 15Proのバッテリーは超高エネルギー密度を持ち、シリコン含有量が競合製品よりもはるかに高いことを明らかにしました。 2023 年にシリコンベースの電池が大規模にテストされた後、第 2 世代のシリコン負極電池が業界の将来の発展方向として特定されており、今年は直接的な競争のピークを迎えます。 1. シリコンの理論グラム容量は 4200mAh/g に達することがあり、これはグラファイトのグラム容量の 10 倍以上です (グラファイトの理論グラム容量は 372mAh/g)。負極の場合、リチウムイオン挿入量が最大に達したときの容量が理論上のグラム容量であり、同じ重量下での容量を意味します。

Windows 11 でこの PC によるモバイル デバイスへのアクセスを停止または許可します Windows 11 でこの PC によるモバイル デバイスへのアクセスを停止または許可します Feb 19, 2024 am 11:45 AM

Microsoft は、最新の Windows 11 バージョンで PhoneLink の名前を MobileDevice に変更しました。この変更により、ユーザーはプロンプトを通じてモバイル デバイスへのコンピュータ アクセスを制御できるようになります。この記事では、モバイル デバイスからのアクセスを許可または拒否するコンピューターの設定を管理する方法について説明します。この機能を使用すると、モバイル デバイスを設定してコンピュータに接続し、テキスト メッセージの送受信、モバイル アプリケーションの制御、連絡先の表示、電話の発信、ギャラリーの表示などを行うことができます。携帯電話を PC に接続することは良い考えですか?携帯電話を Windows PC に接続すると、機能やメディアを簡単に転送できる便利なオプションです。これは、モバイルデバイスが利用できないときにコンピュータを使用する必要がある人にとって便利です

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます

151 はチャイナモバイルまたはチャイナユニコムで始まりますか? 151 はチャイナモバイルまたはチャイナユニコムで始まりますか? Mar 06, 2023 am 11:43 AM

151 で始まる番号は、携帯電話会社の番号セグメントです。 151 はチャイナモバイルの番号ブロックの 1 つであり、2008 年に番号の割り当てを開始し、158、159、150 に続く 4 番目の「13」で始まらない番号ブロックでもあります。ブロック数のリソース不足を緩和するためのものです。

HTML、CSS、jQuery: 自動スクロール掲示板を作成する HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、および jQuery: 自動的にスクロールする掲示板を作成する 最新の Web デザインでは、重要な情報を伝え、ユーザーの注意を引くために掲示板がよく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザー エクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。まず、HTが必要です

See all articles