Calcスクロールバー表示時にページがジャンプしない問題の解決方法-CSSチュートリアル-php.cn

Calcスクロールバー表示時にページがジャンプしない問題の解決方法

php中世界最好的语言

リリース： 2018-03-21 11:55:38

オリジナル

1536 人が閲覧しました

今回は、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 を紹介します。スクロールバーがある場合、スクロールバーの幅はコンテンツの外側でもシミュレートされるため、オフセットされません。 ·

これは非常に簡単で、たった 1 行のコードで完了します:

.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 サイトの他の関連記事を参照してください。