純粋なCSSの視差インナースクロールバーの問題

多くの人々のように、私は視差（例：Keith Clark's Tutorial）のキースクラークの純粋なCSSの実装を見て、本当にそれが大好きです。純粋なCSSの視差インナースクロールバーの問題

実装しようとすると、オーバーフローした垂直視差コンテンツ（期待されない）の周囲に垂直スクロールバーが表示されます。また、垂直方向のオーバーフロー以外の静的コンテンツに関連する外側の垂直スクロールバーもあります期待される）。私は、ページ全体（視差グループ+静的コンテンツ）を制御する1つの垂直スクロールバーしか必要としませんでした。これで上下にスクロールすると、視差効果が視差グループ内に表示されるだけでなく、静的コンテンツが視野内および視野外に移動することがあります。

どのような変更が必要ですか？

.parallax_group { 
 
    position: relative; 
 
    height: 100vh; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.parallax { 
 
    perspective: 1px; 
 
    perspective-origin-x: 100%; 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
.parallax_layer { 
 
    position: absolute; 
 
    transform-origin-x: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 

 
    font-size: 200%; 
 

 
} 
 

 
.parallax_layer--base { 
 
    transform: translateZ(0) scale(1); 
 
    background-color: red; 
 
} 
 

 
.parallax_layer--back { 
 
    transform: translateZ(-1px) scale(2); 
 
    background-color: blue; 
 
} 
 

 
.parallax_layer--deep { 
 
    transform: translateZ(-2px) scale(3); 
 
    background-color: green; 
 
} 
 

 
.static_content { 
 
    height: 300px; 
 
    background-color: black; 
 
}

<div class="parallax"> 
 
    <div class="parallax_group"> 
 
    <div class="parallax_layer parallax_layer--back"> 
 
     <p>Back Layer</p> 
 
    </div> 
 

 
    <div class="parallax_layer parallax_layer--base"> 
 
     <p>Base Layer</p> 
 
    </div> 
 

 
    <div class="parallax_layer parallax_layer--deep"> 
 
     <p>Deep Layer</p> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="static_content"> 
 

 
</div>

出典

2017-07-22 John Stafford

あなたのコード： -

.parallax { 

perspective: 1px; 
perspective-origin-x: 100%; 
height: 100vh; 
overflow-x: hidden; 
overflow-y: auto; 
}

だけ削除 "の視点：1pxのを、"

.parallax { 

perspective-origin-x: 100%; 
height: 100vh; 
overflow-x: hidden; 
overflow-y: auto; 
}

これは私が "スクロールバー" のウル問題を解決したと思わインナースクロールバー

出典

2017-07-22 15:41:01

回答ありがとうございますが、これはエフェクトを壊し、内側のスクロールバーを削除しません。 –

.parallax_group { 
 
    position: relative; 
 
    height: 100vh; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.parallax { 
 
    perspective:3px; 
 
    perspective-origin-x: 100%; 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow-y: auto; 
 
    
 
} 
 

 
.parallax_layer { 
 
    position: absolute; 
 
    transform-origin-x: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 

 
    font-size: 200%; 
 

 
} 
 

 
.parallax_layer--base { 
 
    transform: translateZ(0) scale(1); 
 
    background-color: red; 
 
} 
 

 
.parallax_layer--back { 
 
    transform: translateZ(-1px) scale(2); 
 
    background-color: blue; 
 
} 
 

 
.parallax_layer--deep { 
 
    transform: translateZ(-2px) scale(3); 
 
    background-color: green; 
 
} 
 

 
.static_content { 
 
    margin-top:90%; 
 
    height: 300px; 
 
    background-color: black; 
 
}

<html> 
 
<head> 
 
    
 
<body> 
 

 
<div class="parallax"> 
 
    <div class="parallax_group"> 
 
    <div class="parallax_layer parallax_layer--back"> 
 
     <p>Back Layer</p> 
 
    </div> 
 

 
    <div class="parallax_layer parallax_layer--base"> 
 
     <p>Base Layer</p> 
 
    </div> 
 

 
    <div class="parallax_layer parallax_layer--deep"> 
 
     <p>Deep Layer</p> 
 
    </div> 
 
    </div> 
 

 
<div class="static_content"> 
 

 
</div> 
 
</div> 
 
    </body> 
 
    </html>

を削除します。 Uは、余白を減らすために上の余白を編集できます。

出典

2017-07-22 19:00:10

私は同じ問題を解決しようとしています。

body, html { 
 
    overflow: hidden; 
 
} 
 

 
* { 
 
    margin:0; 
 
    padding:0; 
 
}

あなたがキース・クラークのdemo3 hereでこれを見ることができます：どのような私のために働いたことは以下の通りでした。 Mac用のChromeとFirefoxでは、他の環境についてはまだわかりません。

出典

2017-12-05 11:04:00 DCresti

純粋なCSSの視差インナースクロールバーの問題

答えて

関連する問題