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

Question

I have this JavaScript code that changes font-size based on 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>

Everything seems to be working fine, except that sometimes the scroll event keeps firing multiple times, causing the text to flick in a loop. I've tested different debugging methods, like debouncing, throttling, setting line-height manually, etc, but none worked.

Also, you can type in console window.scrollTop(0, number) to cause the flickering effect. Try different numbers. At some point it'll happen.

Don't know for sure what is causing it, so some help would be appreciated.

Here's a video: https://youtu.be/Kiwwcabmqcc

And a Codepen: https://codepen.io/podrivo/pen/zebWmW

Thanks!

Answer 1

The solution is to set the last scroll position to be different from the actual scroll position. So the JavaScript is:

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))

Answer 2

我也遇到了同样的问题，你解决了吗？