背景色とラバーバンド

Iは主コンテンツのスクロール固定ヘッダ/フッタ、ゴムバンドとモバイルSafariでウェブページを構築している：背景色とラバーバンド

html, 
 
body { 
 
    margin: 0 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.header, 
 
.footer { 
 
    height: 50px; 
 
    position: fixed; 
 
    z-index: 100; 
 
    width: 100%; 
 
} 
 
.header { 
 
    top: 0; 
 
    background-color: #44677F; 
 
} 
 
.footer { 
 
    bottom: 0; 
 
    background-color: #4E3AFF; 
 
} 
 
.container { 
 
    height: 100%; 
 
    overflow: auto; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
.content { 
 
    background-size: 50px 50px; 
 
    background-color: #D0FCFF; 
 
    background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent); 
 
    height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <header class="header"></header> 
 
    <div class="container"> 
 
    <div class="content"></div> 
 
    </div> 
 
    <footer class="footer"></footer> 
 
</body> 
 

 
</html>

を

ゴムバンドのスクロール中に表示される領域の背景色を変更するにはどうすればよいですか？

私は私が上にスクロールするときように、ヘッダ/フッタの同じ色を使用したいと思います：

header

を、私は下にスクロールするとき：

footer

Iを本文に背景色を設定することで、スクロール領域の色全体を変更することが可能であることが分かります。

.body { 
    background-color: rebeccapurple; 
}

ので、私は、グラデーションを使用してみました：

.body { 
    background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%); 
}

をそれはうまくいきませんでした。

出典

2016-04-28 Paul

スクロールはイベントであるため、スクロールするときにCSSは背景を変更できません。しかし、これはJQueryの[.load（）]（http://api.jquery.com/scroll/）APIを使用して行うことができます –

@MichaelSchwartzこの問題を解決する唯一の方法であれば、JavaScriptを使用できます。私はjQueryを使用したくないですが。 – Paul

私は今、バスで私の電話を使用しているので、私は現時点ではあまり助けになることはできません。 [here's]（http://kodeweave.sourceforge.net/editor/#42bd3465730905bf15f71b6d1bf9101b）私はJQueryの[.load（）]（http://api.jquery.com/）を使ってスタイリングを扱う方法を見せつけた。スクロール/） –

これを実現する方法の1つは、ヘッダー/フッターと同じ背景色で、コンテンツの背後に固定要素を追加し、上部に1つ、下部に1つの要素を追加することです。

#headerBackground { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{headerColor} 
} 
#footerBackground { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{footerColor} 
} 
<body> 
    <div id="footerBackground "></div> 
    <div id="headerBackground "></div> 
    <header class="header"></header> 
    <div class="container"> 
    <div class="content"></div> 
    </div> 
    <footer class="footer"></footer> 
</body>

ヘッダー/フッターの後ろにあるものを取得するには、z-indexを使って遊ぶ必要があるかもしれません。

出典

2017-09-15 15:13:03

答えて

関連する問題