DevEd 教程中的滚动功能不起作用答案

【问题标题】：Scroll function from DevEd tutorial is not workingDevEd 教程中的滚动功能不起作用
【发布时间】：2021-01-08 15:14:51
【问题描述】：

我已经看过这个教程https://www.youtube.com/watch?v=oUSvlrDTLi4 并且我在做和这里一样的事情，我只是用 ES6 标准替换了 var 。

function scroll(target, duration = 1000) {
  target = document.querySelector(target) + window.scrollY;
  let targetPos = terget.getBoundingClientRect().top;
  let startPos = window.pageYOffset;
  let distance = targetPos - startPos;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    let timeElapsed = currentTime - startTime;
    let run = ease(timeElapsed, startPos, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

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

.a {
  width: 100%;
  height: 100vh;
  background: green;
}

.b {
  width: 100%;
  height: 100vh;
  background: yellow;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="a">
    <h1 onclick="scroll('.b', 1000)">Scroll</h1>
  </div>
  <div class="b">
    <h1 onclick="scroll('.a', 1000)">Scroll</h1>
  </div>
</body>

</html>

但是，它似乎不起作用。

【问题讨论】：

标签： javascript html smooth-scrolling

【解决方案1】：

将函数名改为不与window.scroll冲突。
target 应该是元素本身或document.querySelector(target)。
target 在函数的第二行拼写错误。

function myScroll(target, duration = 1000) {
  target = document.querySelector(target);
  let targetPos = target.getBoundingClientRect().top;
  let startPos = window.pageYOffset;
  let distance = targetPos - startPos;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    let timeElapsed = currentTime - startTime;
    let run = ease(timeElapsed, startPos, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .a {
      width: 100%;
      height: 100vh;
      background: green;
    }
    
    .b {
      width: 100%;
      height: 100vh;
      background: yellow;
    }
  </style>
</head>

<body>
  <div class="a">
    <h1 onclick="myScroll('.b', 1000)">Scroll</h1>
  </div>
  <div class="b">
    <h1 onclick="myScroll('.a', 1000)">Scroll</h1>
  </div>
</body>

</html>

【讨论】：

@Python_Programmer 你运行代码 sn-p 了吗？它对我有用。
哇，它在 sn-p 上工作，但不适用于浏览器中的 html
@Python_Programmer 你使用的是完全相同的代码吗？
@Python_Programmer 你能提供一个minimal reproducible example 的问题吗？
什么意思？