スクロールバーは、私はチュートリアルに従うことによって、純粋なCSSの視差を持つブロックを作成し、純粋な視差のCSS

Question

では動作しません。私のブロックですが、各ブロックにはスクロールバーがあります。

私の問題：
各ブロックには、視差効果を作るためのスクロールバーがあります。スクロールバーブロックを削除し、私のページのスクロールバーを使って視差効果ブロックを作りたいと思います。ここで

は、視差効果は私のホームページのブロックの上にある、私のサイトです。ここで
http://s1biose.com

は自分のスタイルシートである：ここで

.path-frontpage .main-container { 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

.path-frontpage .main-container .row { 
    margin-left: 0; 
    margin-right: 0; 
} 

.path-frontpage .main-container .row .col-sm-12 { 
    padding-left: 0; 
    padding-right: 0; 
} 

.path-frontpage .region-content { 
    margin:0; 
    padding:0; 
} 

.parallax1, 
.parallax2, 
.parallax3, 
.parallax4, 
.parallax5 { 
    height: 500px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    -webkit-perspective: 1px; 
    -moz-perspective: 1px; 
    -ms-perspective: 1px; 
    -o-perspective: 1px; 
    perspective: 1px; 
    -webkit-perspective-origin-x: 100%; 
    -moz-perspective-origin-x: 100%; 
    -ms-perspective-origin-x: 100%; 
    -o-perspective-origin-x: 100%; 
    perspective-origin-x: 100%; 
} 

.parallax__layer { 
    height: 140%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    -webkit-transform-origin-x: 100%; 
    -moz-transform-origin-x: 100%; 
    -ms-transform-origin-x: 100%; 
    -o-transform-origin-x: 100%; 
    transform-origin-x: 100%; 
} 

.parallax__layer--back { 
    -webkit-transform: translateZ(-1px) scale(2); 
    -moz-transform: translateZ(-1px) scale(2); 
    -ms-transform: translateZ(-1px) scale(2); 
    -o-transform: translateZ(-1px) scale(2); 
    transform: translateZ(-1px) scale(2); 
} 

.parallax1 .parallax__layer--back { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-1.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.parallax2 .parallax__layer--back { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-2.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.parallax3 .parallax__layer--back { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-3.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.parallax4 .parallax__layer--back { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-4.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.parallax5 .parallax__layer--back { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/parallax-5.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.parallax__layer--base { 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
} 

.parallax__layer--content { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    text-align: center; 
    width: 100%; 
    color: #ffffff; 
    padding: 15px; 
    background-color: rgba(0, 0, 0, 0.38823529411764707); 
} 

#block-section1, 
#block-section2, 
#block-section3, 
#block-section4, 
#block-section5 { 
    width: 100%; 
    text-align: center; 
    padding: 2em; 
    font-size: 20px; 
    background-color: #3b842d; 
    color: #ffffff; 
} 

.parallax__layer--base h2, 
#block-section1 h2, 
#block-section2 h2, 
#block-section3 h2, 
#block-section4 h2, 
#block-section5 h2 { 
    margin-top: 0px; 
    font-size: 30px; 
} 

.parallax__layer--base p { 
    font-size: 16px; 
} 

#block-section1 p, 
#block-section2 p, 
#block-section3 p, 
#block-section4 p, 
#block-section5 p { 
    font-size: 20px; 
} 

は私のhtmlコードは（drupalの上のテンプレート）です：

<div class="{{ elements['#id'] }}"> 
    <div class="parallax__layer parallax__layer--back"></div> 
    <div class="parallax__layer parallax__layer--base"> 
     <div class="parallax__layer--content">{{ content['body']['0']['#text'] | raw}}</div> 
    </div> 
</div> 

Answer 1

このリンクを開き、urスクロールバーをデザインした後にCSSをコピーして、urプロジェクトに貼り付けてください Try this