当前位置：首页 > 行业动态 > 正文

按字母 js 滚动

使用JS监听滚动事件，动态加载内容，优化性能，实现

原理分析

通过监听滚动事件,将页面垂直滚动距离映射为字母形状（如J/S）的路径坐标，再利用CSS变换或JS动画让元素沿该路径移动，形成视差滚动效果。

实现步骤

  1. 路径定义

    • J形路径：先垂直下降，再向右下方倾斜，最后向左下方收尾
    • S形路径：波浪形上下起伏，需用正弦函数或二次贝塞尔曲线模拟

  2. 坐标映射

    // 假设总滚动高度为document.body.scrollHeight
const maxScroll = document.body.scrollHeight window.innerHeight;
// 当前滚动进度（0~1）
const progress = window.scrollY / maxScroll;

  3. 路径函数
    | 字母 | 路径公式（x,y） |
    |——|———————————————————————————-|
    | J | x = progress 50; y = progress 100 + (progress > 0.5 ? (progress-0.5)50 : 0) |
    | S | x = 0; y = 50 + 50Math.sin(progressMath.PI) |

  4. 元素定位

    .moving-element {
  position: fixed;
  transform: translate(calc(var(--x)px), calc(var(--y)px));
}

代码示例（J形路径）

<div class="bg">背景</div>
<div class="moving-element">滚动元素</div>
body { height: 2000px; } / 模拟长页面 /
.bg { 
  background: linear-gradient(to b, #f6d365 0%, #fda085 100%);
  position: fixed; width: 100%; height: 100%; z-index: -1;
}
.moving-element { width: 100px; text-align: center; }
window.addEventListener('scroll', () => {
  const maxScroll = document.body.scrollHeight window.innerHeight;
  const progress = window.scrollY / maxScroll;
  // J形路径算法
  let x = progress  window.innerWidth / 2; // 横向最大偏移一半屏幕宽
  let y = progress  window.innerHeight; // 基础垂直滚动
  if(progress > 0.5) y += (progress 0.5)  window.innerHeight; // 后半段加速下移
  document.querySelector('.moving-element').style.transform = `translate(${x}px, ${y}px)`;
});

注意事项

问题 解决方案
移动端卡顿 使用requestAnimationFrame替代直接事件监听，并限制DOM更新频率
不同分辨率适配 改用vw/vh单位或window.innerWidth/Height动态计算
多元素同步运动 为每个元素独立计算路径，但共享相同的progress基准值

相关问题与解答

Q1：如何让元素沿自定义图形（如心形）滚动？
A：需将心形参数方程转换为坐标公式， 

// 心形极坐标转笛卡尔坐标
const a = 15; // 大小系数
const x = 16Math.pow(Math.sin(progressMath.PI),3);
const y = -(13Math.cos(progressMath.PI) 5Math.cos(2progressMath.PI)) + window.innerHeight;

Q2：滚动时如何降低性能消耗？
A：1. 使用throttle函数限制执行频率
　　2. 仅用CSS实现静态路径（如background-attachment: fixed模拟视差）
　　3. 对非可视区域元素暂停动画

以便
0

相关文章