javascript - 通过滚动事件更改字体大小后文本闪烁

Question

我有这段 JavaScript 代码可以根据 window.scrollY 更改 font-size。

var title = document.querySelector('.title')
var titleFontSizePX = getComputedStyle(title).fontSize
var titleFontSizePXInt = parseFloat(titleFontSizePX)

var titleFontSizeVWInt = titleFontSizePXInt * (100 / window.innerWidth)
var titleFontSizeVW = titleFontSizeVWInt + 'vw'
title.style.fontSize = titleFontSizeVW

function updateFontSize(event) {
  console.log('fire!', event.type, window.scrollY)
  var titleSizeMax = titleFontSizeVWInt - 0.02 * window.scrollY
  var titleSizeMin = titleFontSizeVWInt * 2 / 5
  title.style.fontSize = Math.max(titleSizeMin, titleSizeMax) + 'vw'
}

var events = ['scroll', 'touchmove']
events.forEach(event => document.addEventListener(event, updateFontSize))

body {
  background: #111;
  padding: 40vh 10vw 10vw;
  font-family: 'Rubik';
  color: white;
}

h1 {
  font-size: 12vw;
  line-height: 1em;
  font-weight: 700;
}

p {
  font-size: 1.4rem;
  line-height: 1.6em;
  font-weight: 400;
  margin-top: 2em;
  max-width: 50%;
}

<h1 class="title">
  This is a big<br> hero copy to<br> say a couple<br> words about<br> this website.
</h1>

<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches
  into stiff sections. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His
  room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with
  a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>

一切似乎都正常，除了有时滚动事件会多次触发，导致文本在循环中轻弹。我已经测试了不同的调试方法，例如去抖动、节流、手动设置 line-height 等，但都没有用。

此外，您可以在控制台中键入 window.scrollTop(0, number) 来产生闪烁效果。尝试不同的数字。在某个时候它会发生。

不确定是什么原因造成的，因此不胜感激。

这是一个视频:https://youtu.be/Kiwwcabmqcc

还有一个代码笔:https://codepen.io/podrivo/pen/zebWmW

谢谢!

Answer 1

解决方法是将上次滚动位置设置为与实际滚动位置不同。所以 JavaScript 是:

var title               = document.querySelector('.title')
var titleFontSizePX     = getComputedStyle(title).fontSize
var titleFontSizePXInt  = parseInt(titleFontSizePX, 10)

var titleFontSizeVWInt  = titleFontSizePXInt * (100 / window.innerWidth)
var titleFontSizeVW     = titleFontSizeVWInt + 'vw'
title.style.fontSize    = titleFontSizeVW

var lastScroll          = 0

function updateFontSize(event) {
  if (lastScroll != window.scrollY) {
    var titleSizeMax      = titleFontSizeVWInt - 0.02 * window.scrollY
    var titleSizeMin      = titleFontSizeVWInt * 2 / 5
    title.style.fontSize  = Math.max(titleSizeMin, titleSizeMax) + 'vw'
  }
  lastScroll = window.scrollY
}

var events = ['scroll', 'touchmove']
events.forEach(event => document.addEventListener(event, updateFontSize))