コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

零下一度
リリース： 2017-06-26 10:23:48
オリジナル
1439 人が閲覧しました

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

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

　　　　　　　　nav{

　　　　　　　　　　position:fixed;

　　　　　　　　　　top:0rem;

　　　　　　　　};

　　　　　　　　footer{

                         position:fixed;

　　　　　　　　　bottom:0rem;

　　　　　　　 };

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

2.使用IScroll插件。

   例如：　　　

　　　　　　













  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域





底部




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














  • コンテンツエリア

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

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

  • コンテンツエリア

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



    • 底部


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

関連ラベル：
練習する コンテンツ エリア スクロール 動く
ソース：php.cn
前の記事：ReactJs で CSS スタイルを設定するサンプルチュートリアルを要約します。 次の記事：JavaScript での平等・不平等の判定例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1429
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート