ウェブページ読み込み時に左右にジャンプする原因の分析と解決
|
最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを margin:0 auto; で中央に配置すると、ウェブページは開いた瞬間に左に揺れ、別のページに入ると右に揺れ、また左に戻ります。ページ間を頻繁に移動すると、めまいがします。原因は、ウェブページの高さが足りないと、右側のスクロールバーが表示されないからです。ここで、ウェブページの幅にスクロールバーの幅を追加する必要があります。 margin:0 auto; を使用すると、ウェブページは中央に配置されますが、ウェブページの高さによってブラウザにスクロールバーが表示される場合は、当然、ウェブページの幅からスクロールバーの幅を減算する必要があり、するとウェブページが少し左に揺れます。 そうでなければ、私が上で言ったことを理解していますか? 多くの人がこの状況を経験したことがあるはずです。解決策は非常に簡単で、スタイルシート (CSS) で右スクロールバーを常に表示するようにするだけです。Web ページの高さが十分でない場合、ブラウザは右スクロールバーが表示されたときにもそれを表示します。コードは次のとおりです。 コードをコピー コードは次のとおりです。html{オーバーフロー-y:スクロール;} |
<<: テキストエリアの disabled 属性と readonly 属性の具体的な使用法
>>: この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。
推薦する
Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法
この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...
JS を使用して要素が配列であるかどうかを判断する例
検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...
この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。
現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...
Vueはプライベートフィルターと基本的な使用法を定義します
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...
EChartsマウスイベント処理方法の詳細な説明
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明
Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...
AngularとIonicのライフサイクルとフック関数を素早く理解するための記事
目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...
mysql binlog ログを正しくクリーンアップする 2 つの方法
mysqlはbinlogログを正しくクリーンアップします序文： MySQL の binlog はデー...
システムメンテナンスページにリダイレクトするように nginx を設定する
先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...
88 秒で 1,000 万件のレコードを MySQL データベース テーブルに挿入する方法
私が使用しているデータベースはMySQLデータベースバージョン5.7ですまずデータベーステーブルを自...
Reactはページの透かし効果の全プロセスを実現します
目次序文1. 使用例2. 実施プロセス3. コンポーネントコード要約する序文1. cavans では...
アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します
目次環境： 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
iframeリフレッシュ方式の方が便利
iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...
Promise カプセル化 wx.request メソッド
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...
MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...