У меня есть простой веб-сайт, я добавил немного кода HTML, CSS и JS. Кажется, JS теперь заставляет мою страницу бесконечно расширяться за нижний колонтитул. Я хотел бы, чтобы страница заканчивалась в нижнем колонтитуле, как обычно.

Я пробовал возиться с разными настройками, я не гуру JS. Я также сделал много поиска в Google, без каких-либо эффективных результатов.

Вот мой код:

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>
1
maathimself - 2 Май 2019 в 06:40

3 ответа

Лучший ответ

@ Часка, спасибо за ответ. Хотя это не решило мою проблему напрямую, оно привело к решению. Я попробовал то, что вы предложили, но это привело к проблемам форматирования с заголовком (я знаю, что не разделял весь код). Я внес небольшое изменение в ваше дополнение, и оно работает, спасибо за вашу помощь!

            overflow: hidden;
            position: static;
0
maathimself - 3 Май 2019 в 23:17

Не уверен, что другая часть на странице.

Вы можете попробовать добавить ниже коды CSS, чтобы решить эту проблему.

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;
  /* css to be added */
	overflow: hidden;
	position: fixed;
  top: 0;
  left: 0;
	width: 100%;
}
.other {
  height: 1400px;
}
<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>
<div class="other"></div>
0
Chaska 2 Май 2019 в 04:05

Ссылка https://developer.mozilla.org/en-US / документы / Web / API / Документ / scroll_event

Код стиля, помещенный в "window.requestAnimationFrame"

0
Andy Tsou 2 Май 2019 в 03:53