时间戳

首页 > 解决方案 > 向站点添加了一些代码，它可以正常工作，但似乎无限滚动到页脚之外

javascript - 向站点添加了一些代码，它可以正常工作，但似乎无限滚动到页脚之外

问题描述

我有一个简单的网站，我添加了一些代码 html、css 和 JS。似乎 JS 现在导致我的页面无限延伸到页脚之外。我希望页面像往常一样在页脚处结束。

我尝试过使用不同的设置，我不是 JS 大师。我也做了很多谷歌搜索，没有有效的结果。

这是我的代码：

const $ = document.querySelector.bind(document);
const w = $(".w");
const ee = $(".ee");
const l = $(".l");
const c = $(".c");
const o = $(".o");
const m = $(".m");
const e = $(".e");

function transformLetters() {
  const scroll = window.scrollY;
  
  w.style.transform = `translate3d(0, ${scroll*2.4}px, 0) rotateY(${-scroll*1.03}deg)`;

  ee.style.transform = `translate3d(${-scroll*1.45}px, ${scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;

  l.style.transform = `translate3d(${scroll*1.65}px, ${-scroll*2.05}px, 0) rotate(${scroll*1.2}deg)`;

  c.style.transform = `translate3d(0, ${scroll*2.75}px, 0) rotateY(${scroll*0.05}deg)`;

  o.style.transform = `translate3d(${-scroll*1.75}px, ${scroll*1.65}px, 0) rotate(${-scroll*1.3}deg)`;

  m.style.transform = `translate3d(0, ${-scroll*1.5}px, 0) rotateY(${scroll*1.05}deg)`;

  e.style.transform = `translate3d(${-scroll*1.45}px, ${-scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;
}

window.addEventListener("scroll", transformLetters);
.letters {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(0, 4%, 5%);
  font-size: 3.5rem;
  text-transform: uppercase;
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
<div class="letters">
  <span class="w">w</span>
  <span class="ee">e</span>
  <span class="l">l</span>
  <span class="c">c</span>
  <span class="o">o</span>
  <span class="m">m</span>
  <span class="e">e</span>
</div>

标签： javascripthtmlcss

解决方案

参考 https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

样式代码放在“window.requestAnimationFrame”中

推荐阅读