本教程详细阐述如何通过javascript和css实现类似weltio网站的平滑粘性滚动效果。核心在于禁用原生滚动，监听用户滚轮输入，并利用`requestanimationframe`和`transform: translate3d()`平滑地控制页面元素的垂直或水平位移。这种方法能创建高度定制化且流畅的滚动体验，适用于复杂的交互设计，弥补纯css在实现此类效果上的不足。
引言：超越原生滚动的限制
在现代Web设计中，平滑、粘性且富有交互性的滚动效果已成为提升用户体验的重要手段。许多网站，如Weltio，通过独特的滚动动画，在用户滚动页面时呈现出内容平滑过渡、元素“粘滞”或横向切换的视觉效果。然而，仅依靠CSS的scroll-snap等原生滚动特性，往往难以实现这种高度定制化且极其流畅的动画效果。当需要精细控制滚动速度、加入弹性回弹或实现复杂的滚动联动时，纯CSS的局限性便显现出来。
为了实现这种高级的平滑粘性滚动，我们需要一种更强大的控制机制——通过JavaScript来“劫持”和管理页面的滚动行为。这种方法的核心思想是禁用浏览器原生的滚动条，然后通过监听用户输入（如滚轮事件），并利用JavaScript和CSS transform 属性来模拟和驱动页面的平滑滚动。
核心原理：JavaScript驱动的平滑滚动机制
实现自定义平滑滚动效果的关键在于以下几个核心原理：
- 禁用浏览器原生滚动： 这是第一步，通过在body元素上设置overflow: hidden;，阻止浏览器默认的滚动行为，从而将滚动控制权完全交给JavaScript。
- 监听用户输入： 使用window.addEventListener("wheel", ...)来捕获用户的滚轮事件。event.deltaY属性提供了滚动的垂直距离和方向，是驱动自定义滚动的输入源。对于触摸设备，则需要监听touchstart、touchmove、touchend等事件来模拟滚动。
-
双变量平滑插值： 为了实现平滑过渡，我们引入两个关键变量：
- desiredScroll：代表用户期望的滚动位置，它会根据滚轮输入立即更新。
- actualScroll：代表当前页面实际渲染的滚动位置。 通过一个插值算法（例如：actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;），让actualScroll以一定的平滑度逐渐趋近desiredScroll。delay值越大，滚动效果越平滑。
- 动画循环与性能优化： 使用window.requestAnimationFrame()来创建一个高效的动画循环。requestAnimationFrame会在浏览器下一次重绘之前执行回调函数，确保动画与浏览器渲染同步，从而提供最佳的流畅度和性能。
- CSS transform 实现位移： 页面内容的实际移动通过CSS transform: translateY()（垂直滚动）或translateX()（水平滚动）来实现。transform属性通常由GPU加速，相比直接修改top、left或margin等属性，它能提供更流畅的动画效果，因为它不会触发页面的布局（layout）或重绘（paint）过程。
实现步骤与代码示例
接下来，我们将逐步构建一个具备平滑滚动和弹性回弹效果的页面。
立即学习“Java免费学习笔记（深入）”；
1. 基础HTML结构与CSS重置
首先，我们需要一个包含多个内容块的HTML页面，并应用基础的CSS样式来禁用原生滚动和设置元素样式。
平滑粘性滚动教程
内容块 1
内容块 2
内容块 3
内容块 4
内容块 5
内容块 6
2. JavaScript核心逻辑：监听与平滑滚动
接下来，我们将编写JavaScript代码来实现滚轮事件监听、滚动数据管理以及平滑动画循环。
// JavaScript 核心逻辑
let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0; // 实际渲染的滚动位置
const smoothFactor = 10; // 控制平滑度，值越大越平滑，动画越慢
/**
* 更新滚动位置的动画函数
*/
function updateScroll() {
// 平滑地将 actualScroll 趋近 desiredScroll
// 这是一个简单的指数加权移动平均算法
actualScroll = actualScroll + (desiredScroll - actualScroll) / smoothFactor;
// 当实际滚动位置与期望位置非常接近时，直接设为期望位置
// 避免无限接近的小数计算，提高精度和性能
if (Math.abs(actualScroll - desiredScroll) < 0.1) {
actualScroll = desiredScroll;
}
updateTransform(); // 更新页面元素的transform
// 循环调用 requestAnimationFrame，实现持续动画
window.requestAnimationFrame(updateScroll);
}
/**
* 应用 transform 样式来移动页面内容
*/
function updateTransform() {
// 将整个 body 元素向上移动，模拟页面滚动
// 注意：这里是负值，因为向下滚动时 desiredScroll 增加，页面内容应向上移动
document.body.style.transform = `translateY(${-actualScroll}px)`;
}
// 监听滚轮事件，更新 desiredScroll
window.addEventListener("wheel", event => {
// event.deltaY 表示滚动的垂直距离
// 正值表示向下滚动，负值表示向上滚动
desiredScroll += event.deltaY;
});
// 启动动画循环
window.requestAnimationFrame(updateScroll);3. 滚动边界限制与弹性回弹效果
为了防止用户滚动超出内容的顶部或底部，我们需要计算最大滚动高度并限制desiredScroll。同时，我们可以增加一个弹性效果，当滚动超出边界时，滚动速度减慢，并在松开滚轮后平滑回弹。
// JavaScript 核心逻辑（包含边界限制与弹性回弹）
let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0; // 实际渲染的滚动位置
const smoothFactor = 10; // 控制平滑度，值越大越平滑，动画越慢
/**
* 更新滚动位置的动画函数
*/
function updateScroll() {
// 计算最大可滚动高度
// document.body.clientHeight 是 body 的实际内容高度
// window.innerHeight 是视口的高度
const maxScrollHeight = document.body.clientHeight - window.innerHeight;
// --- 边界限制与弹性效果处理 ---
// 当 desiredScroll 小于 0 (超出顶部)
if (desiredScroll < 0) {
// 减慢负向滚动，实现弹性效果
desiredScroll -= desiredScroll / (smoothFactor / 2);
}
// 当 desiredScroll 大于最大滚动高度 (超出底部)
else if (desiredScroll > maxScrollHeight) {
// 减慢正向滚动，实现弹性效果
desiredScroll -= (desiredScroll - maxScrollHeight) / (smoothFactor / 2);
}
// --- 边界处理结束 ---
// 平滑地将 actualScroll 趋近 desiredScroll
actualScroll = actualScroll + (desiredScroll - actualScroll) / smoothFactor;
// 当实际滚动位置与期望位置非常接近时，直接设为期望位置
if (Math.abs(actualScroll - desiredScroll) < 0.1) {
actualScroll = desiredScroll;
}
updateTransform(); // 更新页面元素的transform
window.requestAnimationFrame(updateScroll); // 循环调用
}
/**
* 应用 transform 样式来移动页面内容
*/
function updateTransform() {
document.body.style.transform = `translateY(${-actualScroll}px)`;
}
// 监听滚轮事件，更新 desiredScroll
window.addEventListener("wheel", event => {
const scrollDelta = event.deltaY;
const maxScrollHeight = document.body.clientHeight - window.innerHeight;
// 在边界处减缓 desiredScroll 的增加，增强弹性效果
if (desiredScroll < 0 && scrollDelta < 0) {
desiredScroll += scrollDelta / 2; // 向上滚动超出顶部，减缓
} else if (desiredScroll > max 
