我经常在桌面上看到这种动量风格的滚动transform: translate，我真的很喜欢这种效果的平滑度。我已经尝试使用 requestAnimationFrame 和 css 过渡来实现缓动效果。在 webkit 浏览器中，效果如丝般顺滑，效果很好。问题在于 Firefox 和边缘。它有点跳动，不像黄油那么光滑。
我的问题是有更好的方法来解决这个问题，还是我错过了我应该做的事情。我无法确定 Firefox 的问题。我不知道 css 转换是否是问题所在。这是我要达到的目标的粗略示例：
这是一个codepen Codepen
这是一个片段：
//Momentum Scrolling
const requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
const wrapper = document.querySelector(".wrapper"),
target = document.getElementsByTagName("body")[0];
let easing = "cubic-bezier(0.23, 1, 0.32, 1)",
duration = "1s",
lastScrollY = window.scrollY,
pos = 0;
const init = () => {
target.style.height = wrapper.offsetHeight + "px";
target.style.overflow = "auto";
wrapper.style.transition = "transform " + duration + " " + easing;
wrapper.style.position = "fixed";
wrapper.style.top = "0";
wrapper.style.left = "0";
wrapper.style.width = "100%";
wrapper.style.padding = "0";
wrapper.style.zIndex = "2";
wrapper.style.display = "block";
wrapper.style.backfaceVisibility = "hidden";
loop();
window.addEventListener("resize", () => {
target.style.height = wrapper.offsetHeight + "px";
});
};
const onScroll = scrollY => {
pos = -(scrollY || document.documentElement.scrollTop);
wrapper.style.transform = "translateY(" + pos + "px)";
};
const loop = () => {
let scrollY = window.scrollY;
if (lastScrollY === scrollY) {
requestAnimationFrame(loop);
return;
} else {
lastScrollY = scrollY;
onScroll(scrollY);
requestAnimationFrame(loop);
}
};
init();
//Simple Parallax
const parallaxVert = document.querySelector('.parallax-vert');
const parallaxHor = document.querySelector('.parallax-hor');
window.addEventListener('scroll', function() {
parallaxVert.style.transform = `translateY(-${window.scrollY / 8}px)`;
parallaxHor.style.transform = `translateX(-${window.scrollY / 12}px)`;
});body{
font-family: 'Anton', san-serif;
font-size: 40px;
}
.fixed{
position:fixed;
top:30px;
right: 40px;
width: 100px;
height: 60px;
background: white;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
z-index: 4;
}
.box{
height: 100vh;
margin: 2rem;
background: blue;
color:white;
display:flex;
align-items:center;
justify-content:center;
padding: 1rem;
text-align:center;
}
.parallax{
margin-left: 30%;
background: green;
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}<div class="fixed"></div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="box">
Here is some content.
</div>
<div class="box parallax parallax-vert">
Here is some content.
</div>
<div class="box">
Here is some content.
</div>
<div class="box parallax parallax-hor">
Here is some content.
</div>
<div class="box">
Here is some content.
</div>
</div>
</div>
</div>
</div>任何指导将不胜感激。我真的可以使用某人来引导我朝着正确的方向前进，或者给我看一个例子，这样我就不会再浪费时间了。有没有人对这种类型的滚动效果有任何经验？
