ウェブページ読み込み時に左右にジャンプする原因の分析と解決
|
最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを margin:0 auto; で中央に配置すると、ウェブページは開いた瞬間に左に揺れ、別のページに入ると右に揺れ、また左に戻ります。ページ間を頻繁に移動すると、めまいがします。原因は、ウェブページの高さが足りないと、右側のスクロールバーが表示されないからです。ここで、ウェブページの幅にスクロールバーの幅を追加する必要があります。 margin:0 auto; を使用すると、ウェブページは中央に配置されますが、ウェブページの高さによってブラウザにスクロールバーが表示される場合は、当然、ウェブページの幅からスクロールバーの幅を減算する必要があり、するとウェブページが少し左に揺れます。 そうでなければ、私が上で言ったことを理解していますか? 多くの人がこの状況を経験したことがあるはずです。解決策は非常に簡単で、スタイルシート (CSS) で右スクロールバーを常に表示するようにするだけです。Web ページの高さが十分でない場合、ブラウザは右スクロールバーが表示されたときにもそれを表示します。コードは次のとおりです。 コードをコピー コードは次のとおりです。html{オーバーフロー-y:スクロール;} |
<<: テキストエリアの disabled 属性と readonly 属性の具体的な使用法
>>: この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。
推薦する
CSS スタイルの優先順位とカスケード順序に関する議論
一般的に： [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...
MySQLキーワードDistinctの詳細な紹介
MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...
Vue3は独自のページングコンポーネントをカプセル化します
この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...
Idea で Docker を使用して SpringBoot プロジェクトをデプロイする詳細な手順
序文プロジェクト要件: Dockeridea に Docker プラグインをインストールし、Dock...
ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント
ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...
docker version es、milvus、minio 起動コマンドの詳細な説明
1. es起動コマンド: docker run -itd -e TAKE_FILE_OWNERSHI...
MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション
目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...
MySQL8 でパスワードを忘れた後にパスワードをリセットする方法 (MySQL の古い方法は機能しません)
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
jQueryはフェードインとフェードアウト効果を実現します
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...
CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法
設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...
Docker管理に関する断片的な知識のまとめ
目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...
Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
JSインターセプト文字列の3つの方法の詳細な説明
JS には、文字列をインターセプトするための 3 つのメソッド、 slice() 、 substri...
Docker 自動ビルド 自動ビルド実装プロセス図
自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...
Linux での nginx のインストール、展開、使用方法の詳細な説明
目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...