CSS3 Calcのスクロールバーがページ上でジャンプしない問題を解決-CSSチュートリアル-php.cn

CSS3 Calcのスクロールバーがページ上でジャンプしない問題を解決

巴扎黑

リリース： 2017-09-18 11:31:38

オリジナル

2095 人が閲覧しました

calc は要素の長さを指定するために使用される css3 の関数です。 calc() の最大の利点は、要素の幅が calc() を通じて計算できることです。次に、Script House の編集者が、ページがジャンプしないスクロールバーの問題の CSS3 Calc 実装を共有します。必要な友達はそれを参照してください

calc() とは何ですか?

() 文字通り、関数関数として理解できます。実際、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 は、中央に配置された固定幅ボディの親を参照します。作成しないでください (本体を使用しても同様の効果を実現できますが、幅分離の原則に基づいて、推奨されません

) 次に、calc は CSS3 の計算であり、IE10 以降のブラウザーでサポートされており、基本的にサポートされています。 IE9 ブラウザー (background-position では使用できません);

最後に、100vw はブラウザーの window.innerWidth に対する相対的なブラウザーの内部幅です。スクロールバーの幅も含まれることに注意してください。 100% が利用可能な幅、つまりスクロールバーを除いた幅です。

つまり、calc(100vw - 100%) はブラウザのスクロールバーの幅です (スクロールバーがある場合は 0、スクロールバーがない場合は 0)。左右のスクロールバーの幅がある場合 (または両方が 0 の場合)、メインコンテンツをジャンプすることなく常にブラウザーの中央に配置できます。

以上がCSS3 Calcのスクロールバーがページ上でジャンプしない問題を解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。