滾動事件更改字體大小后文本閃爍

Question

我有這個基於window.scrollY更改font-size的 JavaScript 代碼。

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

Answer 2

我也遇到了同樣的問題，你解決了嗎？