Question

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

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

还有一个Codepen：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))

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

1 个答案: