ウェブページ読み込み時に左右にジャンプする原因の分析と解決
|
最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを margin:0 auto; で中央に配置すると、ウェブページは開いた瞬間に左に揺れ、別のページに入ると右に揺れ、また左に戻ります。ページ間を頻繁に移動すると、めまいがします。原因は、ウェブページの高さが足りないと、右側のスクロールバーが表示されないからです。ここで、ウェブページの幅にスクロールバーの幅を追加する必要があります。 margin:0 auto; を使用すると、ウェブページは中央に配置されますが、ウェブページの高さによってブラウザにスクロールバーが表示される場合は、当然、ウェブページの幅からスクロールバーの幅を減算する必要があり、するとウェブページが少し左に揺れます。 そうでなければ、私が上で言ったことを理解していますか? 多くの人がこの状況を経験したことがあるはずです。解決策は非常に簡単で、スタイルシート (CSS) で右スクロールバーを常に表示するようにするだけです。Web ページの高さが十分でない場合、ブラウザは右スクロールバーが表示されたときにもそれを表示します。コードは次のとおりです。 コードをコピー コードは次のとおりです。html{オーバーフロー-y:スクロール;} |
<<: テキストエリアの disabled 属性と readonly 属性の具体的な使用法
>>: この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。
推薦する
カルーセル効果を実現するネイティブJavaScript
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
Dockerコンテナでyumを呼び出すときのエラーの解決方法
dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...
Ubuntu MySQL 5.6 バージョンの削除/インストール/エンコード設定ファイルの設定
1. MySQLを削除する a. sudo apt-get autoremove --purge m...
MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
Docker ケース分析: Redis サービスの構築
目次1 マウントディレクトリとファイルを作成する2 Redisイメージを取得する3 コンテナを作成し...
MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法
1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...
Dockerアーキテクチャ入門
Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...
dl、dt、dd リスト ラベルの例
dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...
MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
画像のプリロードと遅延ロードを実装するJavaScript
この記事では、JavaScriptで画像のプリロードと遅延ロードを実装するための具体的なコードを参考...
Docker コンテナで DockerFile を使用して複数の Tomcat サービスをデプロイする手順
1. [admin@JD ~]$ cd opt #ルートディレクトリにoptと入力2. [admin...
Vue シングルページ アプリケーションで Markdown レンダリングを実装する
以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...
Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説
最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...
MySQL 入門 - 概念
1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...
Mac 向け MySQL のインストールと設定のチュートリアル
この記事では、MacでのMySQLインストールチュートリアルを参考までに紹介します。具体的な内容は次...