如何实现类似指定网站的带动量效果缩放功能？

嘿，这个带动量的缩放功能其实挺实用的，结合你给出的HTML结构，我来一步步拆解具体实现方法，保证逻辑清晰好上手：

你的结构设计很合理：

• .scrolling 层：用来承载需要缩放的内容，隐藏滚动条后，缩放超出的部分可以通过内部滚动（或配合缩放调整位置）来展示
• .overlay 层：固定定位在上方，作为操作界面（比如你的Hello按钮），不会被缩放影响，交互更稳定

1. 完善HTML结构 #

先给.scrolling加一些示例内容，方便测试缩放效果：

<main>
  <section class="scrolling">
    <div class="scrolling-content">
      <h1>测试缩放内容</h1>
      <p>这里是需要带动量缩放的区域，滚动滚轮试试~</p>
      <img src="https://picsum.photos/800/600" alt="测试图片">
    </div>
  </section>
  <section class="overlay">
    <button class="demo">Hello</button>
  </section>
</main>

2. CSS样式处理 #

重点处理滚动条隐藏、层级关系和基础布局：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 承载缩放内容的层 - 隐藏滚动条 */
.scrolling {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* 隐藏各浏览器滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.scrolling::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.scrolling-content {
  width: 100%;
  height: 100%;
  padding: 2rem;
  /* 缩放基准点设为中心，也可以改成鼠标位置，更灵活 */
  transform-origin: center center;
  transition: transform 0.05s linear; /* 基础过渡，配合动量动画 */
}

/* 固定操作层 */
.overlay {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 10; /* 确保在.scrolling上方 */
}

.demo {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
}

3. JavaScript核心逻辑（带动量缩放） #

这部分是关键，我们需要监听滚轮事件，记录缩放速度，然后在滚轮停止后用动量动画继续平滑缩放：

const scrollingContent = document.querySelector('.scrolling-content');
const scrollingLayer = document.querySelector('.scrolling');

// 缩放相关变量
let scale = 1;
const minScale = 0.5; // 最小缩放比例
const maxScale = 2; // 最大缩放比例
const scaleStep = 0.05; // 每次滚轮的基础缩放步长

// 动量动画相关变量
let momentumSpeed = 0;
let lastWheelTime = Date.now();
let animationId = null;

// 监听滚轮事件
scrollingLayer.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止默认滚动行为

  // 计算滚轮方向：向上放大，向下缩小
  const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
  const currentTime = Date.now();
  const timeDiff = currentTime - lastWheelTime;

  // 计算动量速度：基于滚轮的间隔和步长，模拟惯性
  momentumSpeed = delta / (timeDiff || 1);
  lastWheelTime = currentTime;

  // 应用基础缩放
  scale += delta;
  scale = Math.min(Math.max(scale, minScale), maxScale); // 限制缩放范围
  updateScale();

  // 如果有正在运行的动画，先取消，重新开始
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
  startMomentumAnimation();
});

// 更新缩放样式
function updateScale() {
  scrollingContent.style.transform = `scale(${scale})`;
}

// 动量动画函数
function startMomentumAnimation() {
  // 逐渐衰减动量速度，直到接近0
  momentumSpeed *= 0.95;
  // 当速度足够小时，停止动画
  if (Math.abs(momentumSpeed) < 0.001) {
    animationId = null;
    return;
  }

  // 应用动量缩放
  scale += momentumSpeed;
  scale = Math.min(Math.max(scale, minScale), maxScale);
  updateScale();

  // 继续下一帧动画
  animationId = requestAnimationFrame(startMomentumAnimation);
}

• 缩放基准点：上面代码用的是中心缩放，如果想实现“鼠标指向哪里就缩放哪里”，可以在滚轮事件中获取鼠标相对于.scrolling-content的位置，动态设置transform-origin，体验会更棒
• 动量衰减系数：代码里的0.95可以调整，值越大动量持续时间越长，反之则越短
• 缩放范围限制：minScale和maxScale可以根据需求调整，避免缩放过度导致内容不可用

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri