使用CSS滚动视差效果

Question

我试图在一个无限滚动页面achieve parallax effect with only CSS，它有一个无缝的重复背景图案。后台的内容将由AJAX加载，因此它将具有任意高度，具体取决于加载的内容量。作为样本：

Codepen

body, html { 
  margin: 0;
  padding:0;
  height: 100%;
}

.wrapper { 
  height: 2000px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax{
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1');
  
   /*height: 100% <-displayed height of the background is not the expected height (full document height) due to the 3D transformations we are applying to the parallax div to achieve the parallax effect*/
  
  /*My approach was setting absurd height for the parrallax div and then think how to cut it, maybe by a wrapper div with overflow hidden...*/
  height: 999999999999999px;
    
}

.content {
  height: 100%;
  width: 400px;
  margin: auto;
  display: flex;
  justify-content: center;
  background: red;
}

/*I also tried wrapping the parallax div with other div to hide by overflow property the background that is below the content div, but parallax effect is lost, or it just behaves the same as if no wrapper were indeed 

.parallax-wrapper{
  overflow-y: hidden; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 200px;
}*/ 

<div class="wrapper">
  

 <div class="section parallax"></div>

  
  <div class="content">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum venenatis magna, eget hendrerit leo varius vel. Mauris sit amet posuere elit, porta molestie orci. Praesent in vestibulum eros, sit amet aliquam magna. Etiam sed egestas sem, sit amet gravida sapien. Nullam ipsum ligula, ullamcorper ut facilisis vitae, convallis quis ligula. Morbi eleifend tellus mauris, et fermentum nulla semper non. Sed accumsan ultricies ipsum, vestibulum varius est rhoncus quis. Suspendisse nec odio quis magna gravida interdum. Suspendisse in elit tortor. Cras ac nibh sed dolor rhoncus accumsan. Morbi iaculis id mauris quis tristique. Phasellus eleifend purus nec gravida euismod.

</h1>
  </div>
</div>

我希望背景结束当前div内容的位置（它会通过滚动加载更多，但这不是问题），我不知道该怎么做。问题是由于用于实现视差效果的3D CSS效果，视差div的高度将不是屏幕中显示的实际高度，因此很难以某种方式设置该高度以达到我想要的效果。我的方法是设置一个非常大的高度，我后来用包装和overflow-y: hidden切断，但它根本不起作用。

Answer 1

用.parallax-wrapper包装的想法很好。我只是做了一些调整。

<div class="wrapper">
  <div class="parallax-wrapper">
   <div class="section parallax"></div>
    <div class="content">...</div>
  </div>
</div>

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

.parallax {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1');  
}

.content {
  background: red;
  width: 400px;
  margin: auto;
}

.parallax-wrapper{
  position: relative;
  overflow: hidden;   
}

Codepen link => https://codepen.io/moorthy-g/pen/OqwYNQ