本文深入探讨如何通过javascript实现高度定制化的平滑粘性滚动效果，模仿如weltio网站的沉浸式用户体验。教程将指导开发者禁用浏览器原生滚动，转而监听用户滚轮输入，并利用`requestanimationframe`和css `transform`属性，以平滑的动画逻辑控制页面内容的位移，同时涵盖滚动边界、回弹效果及性能优化等关键技术细节。
引言：超越原生滚动的需求
在现代Web设计中，为了提供更具吸引力和沉浸感的交互体验，开发者经常需要实现超越浏览器原生滚动行为的效果，例如平滑的页面过渡、粘性内容在滚动时的特定动画，或是类似Weltio网站中那种“感知不到原生滚动”的自定义滚动条。传统的CSS属性，如position: sticky和scroll-snap-type，虽然能实现部分粘性或吸附效果，但在需要极致平滑、高度可控的滚动动画时，往往力不从心。原生滚动机制通常是离散的、基于事件触发的，难以实现那种如同液体般流动的平滑过渡。
为了达到这种高阶的滚动体验，我们需要放弃对原生滚动的完全依赖，转而通过JavaScript来全面接管滚动逻辑。核心思想是：禁用浏览器自带的滚动条，监听用户的滚轮（或触摸）输入，然后通过编程方式计算内容的理想位置，并以动画的形式平滑地将内容移动到该位置。
核心原理：JavaScript驱动的滚动机制
实现自定义平滑滚动效果主要依赖以下几个核心步骤：
- 禁用原生滚动： 在CSS中，通过设置body { overflow: hidden; }来阻止浏览器生成和处理滚动条。
- 监听用户输入： 使用JavaScript监听wheel事件（对于桌面端）或触摸事件（touchstart, touchmove, touchend，对于移动端），捕获用户的滚动意图和方向。
- 平滑动画循环： 引入两个关键变量：desiredScroll（用户期望的滚动位置）和actualScroll（当前内容的实际滚动位置）。通过requestAnimationFrame创建一个动画循环，在每一帧中，让actualScroll逐渐逼近desiredScroll，从而产生平滑的过渡效果。
- 内容位移： 在动画循环中，根据actualScroll的值，动态地修改页面内容的CSS transform属性（通常是translateY或translate3d）。使用transform进行位移比修改top或margin-top具有更好的性能，因为它利用了GPU加速。
实现步骤详解
下面我们将通过具体的代码示例，逐步构建一个基本的平滑滚动系统。
立即学习“Java免费学习笔记（深入）”；
1. 基础HTML结构
首先，我们需要一个包含多个内容区块的HTML结构。这里我们使用简单的div元素作为示例。
Custom Smooth Scroll 内容区块 1内容区块 2内容区块 3内容区块 4
2. 关键CSS样式
为了禁用原生滚动并为内容元素提供基本样式，我们需要以下CSS。
html, body {
margin: 0;
padding: 0;
}
html {
background-color: #334499; /* 页面背景色 */
}
body {
overflow: hidden; /* 禁用原生滚动 */
min-height: 100vh; /* 确保body有足够高度来容纳内容 */
}
.element {
height: 300px; /* 每个内容区块的高度 */
background-color: #112233;
margin: 20px; /* 间距 */
border-radius: 20px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}3. JavaScript实现平滑滚动
这是实现核心逻辑的部分。我们将定义desiredScroll和actualScroll，并创建动画循环。
// script.js
let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0; // 页面内容的实际滚动位置
// 动画循环函数
function updateScroll() {
const delay = 10; // 决定平滑程度的延迟因子，值越大越平滑但响应慢
// actualScroll 逐渐逼近 desiredScroll
actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;
// 更新内容元素的transform属性
updateTransform();
// 请求下一帧动画
window.requestAnimationFrame(updateScroll);
}
// 应用transform到所有内容元素（或它们的共同父元素）
function updateTransform() {
// 这里我们选择直接平移body元素，因为它包含了所有内容
// 也可以选择一个包裹所有内容的父div
document.body.style.transform = `translateY(${-actualScroll}px)`;
}
// 监听滚轮事件
window.addEventListener("wheel", event => {
// 根据滚轮方向调整 desiredScroll
desiredScroll += event.deltaY;
});
// 启动动画循环
window.requestAnimationFrame(updateScroll);代码解释：
- desiredScroll：累加滚轮事件的deltaY值，表示用户“想要”滚动到的位置。
- actualScroll：通过 actualScroll = actualScroll + (desiredScroll - actualScroll) / delay; 这行代码，实现了一个指数加权移动平均，使得actualScroll平滑地向desiredScroll靠近。delay值越大，过渡越平滑，但响应速度越慢。
- updateTransform()：将-actualScroll的值应用到body元素的transform: translateY()属性上。注意是负值，因为我们希望内容向上移动时，actualScroll是正值。
- requestAnimationFrame(updateScroll)：这是Web浏览器提供的优化动画的API。它会在浏览器准备好渲染下一帧时调用回调函数，确保动画与浏览器刷新率同步，从而避免卡顿并节省电量。
高级特性与优化
上述基本实现已经能提供一个平滑的滚动体验，但它缺少一些关键功能，例如滚动边界限制和类似iPhone的回弹效果。
1. 滚动边界与回弹效果
我们需要确保desiredScroll不会超出内容的实际可滚动范围（0到最大滚动高度），并可以在超出边界时提供一个视觉上的“拉伸”或“回弹”效果。
// script.js (进阶版本)
let desiredScroll = 0;
let actualScroll = 0;
function updateScroll() {
const delay = 10; // 平滑因子
// 计算最大可滚动高度
const maxScrollHeight = document.body.clientHeight - window.innerHeight;
// 处理滚动边界：当desiredScroll超出范围时，减缓其变化速度，实现回弹效果
if (desiredScroll < 0) {
// 向上滚动超出顶部，减缓滚动速度
desiredScroll -= desiredScroll / (delay / 2);
} else if (desiredScroll > maxScrollHeight) {
// 向下滚动超出底部，减缓滚动速度
desiredScroll -= (desiredScroll - maxScrollHeight) / (delay / 2);
}
// actualScroll 逐渐逼近 desiredScroll
actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;
// 当 actualScroll 非常接近 desiredScroll 时，直接设置为相等，避免无限小的浮点数计算
if (Math.abs(actualScroll - desiredScroll) < 1) {
actualScroll = desiredScroll;
}
updateTransform();
window.requestAnimationFrame(updateScroll);
}
function updateTransform() {
document.body.style.transform = `translateY(${-actualScroll}px)`;
}
window.addEventListener("wheel", event => {
const scroll = event.deltaY;
const maxScrollHeight = document.body.clientHeight - window.innerHeight;
// 根据当前desiredScroll位置和滚轮方向，调整desiredScroll的增量
if (desiredScroll < 0 && scroll < 0) {
// 已经超出顶部，继续向上滚动时，减半滚动量
desiredScroll += scroll / 2;
} else if (desiredScroll > maxScrollHeight && scroll > 0) {
// 已经超出底部，继续向下滚动时，减半滚动量
desiredScroll += scroll / 2;
} else {
// 正常滚动
desiredScroll += scroll;
}
});
window.requestAnimationFrame(updateScroll);CSS 调整（可选）：
为了更好地展示回弹效果，可以给body添加一些padding，这样内容可以稍微超出视口。
/* style.css (进阶版本) */
html, body {
margin: 0;
padding: 0;
}
html {
background-color: #334499;
}
body {
overflow: hidden;
min-height: 100vh;
padding: 20px 0; /* 增加上下内边距，以便内容可以轻微超出视口 */
}
.element {
height: 300px;
background-color: #112233;
margin: 20px;
border-radius: 20px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}2. 横向滚动适配
如果需要实现横向的平滑粘性滚动，原理是完全相同的。只需将translateY改为translateX，并将相关高度计算改为宽度计算即可。
// 示例：横向滚动
// document.body.style.transform = `translateX(${-actualScroll}px)`;
// maxScrollWidth = document.body.scrollWidth - window.innerWidth;
// ...3. 触摸设备支持
对于触摸设备，你需要监听touchstart、touchmove和touchend事件。
- touchstart记录初始触摸点。
- touchmove计算手指移动的距离，并将其转换为desiredScroll的变化量。
- touchend处理惯性滚动（可选）。 这通常比滚轮事件处理更复杂，需要考虑多点触控、滑动速度和方向等。
4. 吸附点（Snapping Points）
在现有平滑滚动系统的基础上，可以添加吸附功能。例如，可以定义一系列目标滚动位置（如每个区块的顶部）。在每次滚动结束或用户停止滚动时，计算actualScroll最近的吸附点，然后将desiredScroll设置为该吸附点，系统就会平滑地滚动到那里。这可以通过在updateScroll函数中加入额外的逻辑来判断是否需要吸附，或者在wheel事件处理中，根据滚轮的deltaY，直接将desiredScroll调整到下一个或上一个吸附点。
总结与注意事项
通过JavaScript接管滚动，并利用requestAnimationFrame和CSS transform，我们可以实现高度定制化、流畅且富有创意的滚动体验，如Weltio网站所示的平滑粘性效果。
优点：
- 极致平滑： 动画由JavaScript精确控制，可以实现原生滚动难以达到的流畅度。
- 高度定制： 滚动行为完全可编程，可以添加各种交互效果（如回弹、视差、吸附等）。
- 性能优化： 使用transform进行GPU加速，动画性能通常优于直接修改top或margin。
注意事项：
- 复杂性增加： 相比纯CSS方案，JavaScript代码量和逻辑复杂度会显著增加。
- 可访问性： 禁用原生滚动可能影响依赖标准滚动条的用户（如键盘导航用户）。需要额外的工作来确保可访问性，例如提供键盘导航支持。
- 触摸事件处理： 移动端的触摸滚动需要单独实现，且可能涉及更复杂的物理模拟。
- 性能调优： 尽管transform性能好，但复杂的动画逻辑仍可能导致性能问题，需要仔细测试和优化。
- 兼容性： 确保requestAnimationFrame和wheel事件在目标浏览器中得到良好支持。
通过掌握这些技术，开发者可以突破浏览器原生滚动的限制，为用户带来更具吸引力和沉浸感的Web体验。
