本文深入探讨如何通过javascript实现类似weltio网站的平滑、粘性滚动动画，克服纯css在复杂滚动交互上的局限性。教程将指导读者禁用原生滚动、捕获用户滚轮输入，并利用`requestanimationframe`和`transform`属性构建一个自定义的平滑滚动系统，包括边界处理和“橡皮筋”效果，最终实现高度定制化的用户体验。
在现代网页设计中，为了提供独特且沉浸式的用户体验，开发者常常需要实现超越浏览器原生滚动行为的复杂动画效果，例如全屏粘性水平滚动滑块或平滑过渡的内容切换。尽管CSS提供了scroll-snap等属性来辅助实现一些滚动效果，但对于需要精细控制滚动速度、缓动曲线以及在滚动过程中保持元素“粘性”并触发内容变化的场景，纯CSS往往力不从心。本文将介绍一种通过JavaScript完全接管滚动控制的方法，以实现高度定制化的平滑粘性滚动效果。
1. 理解原生滚动的局限性
原生浏览器滚动通常是瞬时且线性的，其行为由操作系统和浏览器默认实现。scroll-snap可以帮助我们将滚动位置对齐到特定元素，但它难以实现自定义的缓动效果、在滚动到某个点时“暂停”页面滚动并切换内容，或者在滚动超出边界时产生“橡皮筋”般的弹性回弹。这些高级交互通常需要JavaScript来精确计算和控制元素的视觉位置。
2. 禁用原生滚动行为
要完全控制页面的滚动，首先需要禁用浏览器的原生滚动行为。这可以通过将body元素的overflow属性设置为hidden来实现。
html, body {
margin: 0;
padding: 0;
}
body {
overflow: hidden; /* 禁用原生滚动 */
min-height: 100vh; /* 确保内容有足够的空间 */
padding: 20px 0; /* 示例内容间距 */
background-color: #334499; /* 示例背景色 */
}
.element {
height: 300px;
background-color: #112233;
margin: 20px;
border-radius: 20px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}在HTML结构中，我们将创建一些可滚动的“元素”作为演示内容：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义平滑滚动教程</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="element">内容块 1</div> <div class="element">内容块 2</div> <div class="element">内容块 3</div> <div class="element">内容块 4</div> <div class="element">内容块 5</div> <script src="script.js"></script> </body> </html>
3. 捕获用户输入并实现平滑动画
禁用原生滚动后，我们需要监听用户滚动事件（通常是鼠标滚轮事件），并根据这些输入来计算我们期望的滚动位置。然后，通过一个动画循环，使实际的滚动位置平滑地趋近于期望位置。
3.1 监听滚轮事件
使用window.addEventListener("wheel", ...)来捕获滚轮事件。event.deltaY属性提供了滚动的垂直距离。
let desiredScroll = 0; // 期望的滚动位置
let actualScroll = 0; // 当前实际的滚动位置
// 监听滚轮事件，更新期望滚动位置
window.addEventListener("wheel", event => {
desiredScroll += event.deltaY;
});3.2 实现平滑动画循环
为了实现平滑过渡，我们不能直接将actualScroll设置为desiredScroll。相反，我们将让actualScroll逐步逼近desiredScroll。这通常通过一个插值（interpolation）公式在requestAnimationFrame循环中完成。requestAnimationFrame是浏览器提供的优化动画的API，它会在浏览器下一次重绘之前执行回调函数，确保动画与浏览器帧率同步，从而提供更流畅的体验。
const delay = 10; // 控制平滑度的延迟因子，值越大越平滑
function updateScroll() {
// 平滑地将实际滚动位置趋近于期望滚动位置
actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;
// 更新元素或容器的transform属性
updateTransform();
// 继续下一帧动画
window.requestAnimationFrame(updateScroll);
}
function updateTransform() {
// 将整个body内容向上移动，实现滚动效果
// 使用transform: translateY可以利用GPU加速，性能更优
document.body.style.transform = `translateY(${-actualScroll}px)`;
// 注意：translateY的负值表示内容向上滚动，即页面向下滚动
}
// 启动动画循环
window.requestAnimationFrame(updateScroll);通过这种方式，当用户滚动滚轮时，desiredScroll会立即更新，但actualScroll会缓慢且平滑地追随，从而产生平滑的滚动效果。
4. 边界处理与“橡皮筋”效果
简单的平滑滚动系统可能会允许用户无限滚动，或者在到达内容末尾时突然停止。为了提升用户体验，我们需要添加边界检查，并可选地实现类似iPhone的“橡皮筋”回弹效果。
4.1 计算最大滚动高度
首先，我们需要知道页面内容可以滚动的最大高度。这通常是body的总高度减去视口高度。
function getMaxScrollHeight() {
return document.body.clientHeight - window.innerHeight;
}4.2 限制滚动范围与“橡皮筋”效果
在updateScroll和wheel事件监听器中加入逻辑来处理滚动边界。
let desiredScroll = 0;
let actualScroll = 0;
const delay = 10;
function updateScroll() {
const maxScrollHeight = getMaxScrollHeight();
// 边界处理：当期望滚动超出边界时，减缓其速度，实现“橡皮筋”效果
if (desiredScroll < 0) {
desiredScroll -= desiredScroll / (delay / 2); // 越界时滚动减速
}
if (desiredScroll > maxScrollHeight) {
desiredScroll -= (desiredScroll - maxScrollHeight) / (delay / 2); // 越界时滚动减速
}
// 平滑插值
actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;
// 当实际滚动与期望滚动非常接近时，直接设为相等，避免微小抖动
if (Math.abs(actualScroll - desiredScroll) < 1) {
actualScroll = desiredScroll;
}
updateTransform();
window.requestAnimationFrame(updateScroll);
}
function updateTransform() {
// 使用translateY的负值模拟向下滚动
document.body.style.transform = `translateY(${-actualScroll}px)`;
}
window.addEventListener("wheel", event => {
const scrollDelta = event.deltaY;
const maxScrollHeight = getMaxScrollHeight();
// 根据当前滚动位置和方向，调整期望滚动值
if (desiredScroll < 0 && scrollDelta < 0) {
// 向上滚动超出顶部时，减缓滚动速度
desiredScroll += scrollDelta / 2;
} else if (desiredScroll > maxScrollHeight && scrollDelta > 0) {
// 向下滚动超出底部时，减缓滚动速度
desiredScroll += scrollDelta / 2;
} else {
// 正常滚动
desiredScroll += scrollDelta;
}
});
window.requestAnimationFrame(updateScroll);
// 确保在窗口大小改变时重新计算最大滚动高度
window.addEventListener('resize', () => {
// 重新计算maxScrollHeight，并调整desiredScroll以防止内容跳动
const currentMaxScroll = getMaxScrollHeight();
if (desiredScroll > currentMaxScroll) {
desiredScroll = currentMaxScroll;
}
if (desiredScroll < 0) {
desiredScroll = 0;
}
// 立即更新transform，避免resize后的闪烁
updateTransform();
});5. 高级应用：粘性元素与内容切换
有了这个基础的平滑滚动系统，实现类似Weltio的粘性元素和内容切换就变得可行。
- 粘性元素： 你可以在CSS中使用position: sticky，或者在JavaScript中根据actualScroll的值动态计算元素的位置和透明度，使其在特定滚动区间内保持“粘性”或进行动画。
- 内容切换： 当actualScroll达到某个预设阈值时，你可以触发JavaScript函数来改变DOM内容、切换图片、播放视频或更新CSS类，从而实现内容的平滑过渡。例如，可以定义一系列“滚动点”，当actualScroll通过这些点时，触发相应的内容更新。
6. 总结与注意事项
通过JavaScript接管滚动控制，我们可以实现高度定制化的、超出CSS能力范围的平滑粘性滚动效果。
- 性能优化： 始终使用transform: translateY或translate3d来移动元素，因为它们能够利用GPU加速，提供更流畅的动画。避免在动画循环中修改top、left、width、height等会触发浏览器重排（reflow）和重绘（repaint）的属性。
- 兼容性： 鼠标滚轮事件在大多数现代浏览器中都支持。然而，对于触摸设备（如手机和平板），你需要额外监听touchstart、touchmove和touchend事件来模拟滚动行为。
- 无障碍性： 禁用原生滚动会影响键盘导航和屏幕阅读器。在实现自定义滚动时，务必考虑为这些用户提供替代的导航机制，例如键盘方向键支持或跳过动画的选项。
- 复杂性权衡： 自定义滚动系统比原生滚动更复杂，需要更多的代码和维护。在决定使用之前，请权衡其带来的用户体验提升是否值得额外的开发成本。
- 模块化： 将滚动逻辑封装成一个可复用的模块或组件，以便在不同的项目中使用和管理。
通过上述方法，你将能够构建出具有独特视觉和交互效果的网页，为用户提供更加引人入胜的浏览体验。
