Pure CSS Parallax Inner Scrollbar問題

和很多人一樣，我看到Keith Clark的純粹css實現視差（Keith Clark's Tutorial），並且非常喜歡它。Pure CSS Parallax Inner Scrollbar問題

當試圖實現它時，我得到一個圍繞溢出的垂直視差內容（不是預期的）的內部垂直滾動條，以及與在屏幕的垂直溢出之外延伸的靜態內容有關的外部垂直滾動條預期）。我只想要一個控制整個頁面的垂直滾動條（視差組加靜態內容）。當使用此功能向上/向下滾動時，可以在視差組中看到視差效果，以及將靜態內容移入和移出視圖。

我需要做些什麼改變？

.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

感謝您的迴應Omkar，但這打破了效果，並沒有刪除內部滾動條。 –

.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看到這一點。它適用於Chrome和Mac版Firefox，我還不確定其他環境。

來源

2017-12-05 11:04:00 DCresti

Pure CSS Parallax Inner Scrollbar問題

回答

相關問題