ホームページ > 記事 > ウェブフロントエンド > Calcスクロールバー表示時にページがジャンプしない問題の解決方法
Calcスクロールバー表示時にページがジャンプしない問題の解決方法
- php中世界最好的语言オリジナル
- 2018-03-21 11:55:381487ブラウズ
今回は、Calcのスクロールバーが表示されるとページがジャンプしない問題の解決策をお届けします。 Calcのスクロールバーが表示されるとページがジャンプしない問題を解決するための注意事項を紹介します。ケース、見てみましょう。
calc() とは何ですか?
calc() 文字通り、関数 function として理解できます。実際、calc は英語の Calculate の略語で、CSS3 の新しい機能であり、要素の長さを指定するために使用されます。たとえば、calc() を使用して、要素のボーダー、マージン、パディング、フォント サイズ、および幅のプロパティに動的な値を設定できます。なぜ動的値と呼ばれるのですか? 値を取得するために式を使用するからです。ただし、calc() の最大の利点は、要素の幅を calc() を通じて計算できることです。
文法
calc() = calc(四则运算)
例:
.elm {
width: calc(expression);
}
ここで、「expression」は長さの計算に使用される式です
説明
は、長さの値を動的に計算するために使用されます。
演算子の前後にスペースを確保する必要があることに注意してください。例: width: calc(100% - 10px);
calc() 関数を使用して任意の長さの値を計算できます。 ;
-
calc() 関数は、「+」、「-」、「*」、「/」演算をサポートします。
-
calc() 関数は、標準の数学演算の優先順位ルールを使用します。
簡単な例: <!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
width: calc(100% - 50px);
background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>以下は最も一般的に使用されるものです: スクロールバーが表示されてもページがジャンプしないことを認識するアプリケーション
ページコンテンツが動的にロードされるとき、最初はスクロールバーはありません、コンテンツが増加した後にスクロール バーが表示されます。これは、固定幅の中央揃えレイアウトを使用すると、スクロール バーの幅 1 つ分だけ左にオフセットされます。解決策は、すべてのコンテンツに overflow-y:scroll を追加するか、コンテンツに応じて CSS を入力してからコンテンツを追加することです。この記事ではスクロール バーの幅を計算する calc を紹介します。スクロール バーがある場合、スクロール バーの幅はコンテンツの外側でもシミュレートされるため、オフセットされません。 ·
.wrap-outer {
margin-left: calc(100vw - 100%);
} または:
.wrap-outer {
padding-left: calc(100vw - 100%);
} まず第一に、 .wrap-outer は中央に配置された固定幅ボディの親を参照します。そうでない場合は、親を作成します。 (body を使用することでも同様の効果を得ることができますが、幅分離の原則に基づいて、これはお勧めできません); 次に、calc は CSS3 での計算であり、IE10 以降のブラウザーでサポートされており、基本的に IE9 ブラウザーではサポートされません。 background-position
); 最後に、100vw はブラウザの window.innerWidth に対する相対的なブラウザの内部幅です。スクロール バーの幅も含まれることに注意してください。 100% が利用可能な幅、つまりスクロール バーを除いた幅です。 つまり、calc(100vw - 100%) はブラウザのスクロール バーの幅です (スクロール バーがある場合は 0、スクロール バーがない場合は 0)。左右のスクロール バーの幅がある場合 (または両方が 0 の場合)、メイン コンテンツを常にブラウザの中央に配置できるため、ジャンプすることはありません。 この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:CSS3 でのポインターイベントの使用の詳細な説明
focus-within の使用の詳細な説明以上がCalcスクロールバー表示時にページがジャンプしない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。