ページ上部と下部にスクロールした後に白いスペースが跳ね返るのを防ぐ方法

多くのウェブサイトでは、すべての方法でスクロールすると、ページがはね返ったかのようにこの「バウンス」効果が得られます。ブラウザウィンドウの上部にウィンドウの上部にある空白が表示されます。ページ上部と下部にスクロールした後に白いスペースが跳ね返るのを防ぐ方法

同じ状況でスクロールすると、同じ正確な「バウンス」効果が得られます。

ヘッダーとフッターに背景色がある場合、このバウンスは非常に醜いと見えます。

この影響を取り除くにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <header></header> 

    <div></div> 

    <footer></footer> 

</body> 
</html>

CSS

header { 
    width: 100%; 
    background-color: tomato; 
    height: 140px; 
} 

div { 
    height: 1000px; 
} 

footer { 
    width: 100%; 
    background-color: brown; 
    height: 140px; 
}

出典

2015-09-10 Eli Tamosauskas

これは私のために働いた同様の問題がありました。

html { 
    overflow: hidden; 
    height: 100%; 
} 

body { 
    height: 100%; 
    overflow: auto; 
}

出典

2015-09-10 11:47:13

これは私にとって完璧に機能しました。正解とマークする。 –

これはあなたを助けてうれしいです。 –

あなたは次のスタイル適用することにより、その影響を除去することができます：これはあなたの体の内部コンテンツをスクロール可能にするもの

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: auto; 
 
}

を - 可能。

出典

2015-09-10 11:43:21 WisdmLabs

これは何らかの理由で機能しませんでした。下の答えは正しいとマークしました。 –

ページ上部と下部にスクロールした後に白いスペースが跳ね返るのを防ぐ方法

答えて

関連する問題