平滑滚动，其中每个内容以不同的速度滚动

Question

我想制作一个像this页面的平滑滚动页面。我可以看到它像一个视差滚动，但背景延迟跟随内容。有什么办法可以做到这一点？我尝试了很多像Stellar.js等库，但我只能实现“正常”视差效果，其中背景滚动速度较慢/较快，然后是内容。

Answer 1

这将帮助你，我们可以控制车轮的速度和距离

if (window.addEventListener) window.addEventListener('DOMMouseScroll', scroll, false); 
 
window.onmousewheel = document.onmousewheel = scroll; 
 

 
function scroll(event) { 
 
    var delta = 0; 
 
    if (event.scrollDelta) delta = event.scrollDelta/100; 
 
    else if (event.detail) delta = -event.detail/3; 
 

 
    handleScroll(delta); 
 
    if (event.preventDefault) event.preventDefault(); 
 
    event.returnValue = false; 
 
} 
 

 
function handleScroll(delta) { 
 
    var time = 1000; 
 
\t var distance = 200; 
 
    
 
    $('html, body').stop().animate({ 
 
     scrollTop: $(window).scrollTop() - (distance * delta) 
 
    }, time); 
 
}

#myDiv { 
 
    height:2000px; 
 
    width:100%; 
 
    background-color:red; 
 
    
 
    padding: 5px; 
 
    margin: 5px; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myDiv"> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/> 
 
    
 
What is Lorem Ipsum? 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>