Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/409.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 通过滚动事件更改字体大小后文本闪烁_Javascript_Html_Css_Scroll_Flicker - Fatal编程技术网

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

Javascript 通过滚动事件更改字体大小后文本闪烁,javascript,html,css,scroll,flicker,Javascript,Html,Css,Scroll,Flicker,我有一个JavaScript代码,它根据window.scrollY更改字体大小 var title=document.querySelector(“.title”) var titleFontSizePX=getComputedStyle(title).fontSize var titleFontSizePXInt=parseFloat(titleFontSizePX) 变量titleFontSizeVWInt=titleFontSizePXInt*(100/window.innerWidt

我有一个JavaScript代码,它根据
window.scrollY
更改
字体大小

var title=document.querySelector(“.title”)
var titleFontSizePX=getComputedStyle(title).fontSize
var titleFontSizePXInt=parseFloat(titleFontSizePX)
变量titleFontSizeVWInt=titleFontSizePXInt*(100/window.innerWidth)
var titleFontSizeVW=titleFontSizeVWInt+‘vw’
title.style.fontsizev=titleFontSizeVW
函数updateFontSize(事件){
console.log('fire!',event.type,window.scrollY)
var titleSizeMax=titleFontSizeVWInt-0.02*window.scrollY
变量titleSizeMin=titleFontSizeVWInt*2/5
title.style.fontSize=Math.max(titleSizeMin,titleSizeMax)+“vw”
}
var events=['scroll','touchmove']
events.forEach(event=>document.addEventListener(event,updateFontSize))
正文{
背景:#111;
填充:40vh 10vw 10vw;
字体系列:“魔方”;
颜色:白色;
}
h1{
字体大小:12vw;
线高:1米;
字号:700;
}
p{
字体大小:1.4rem;
线高:1.6em;
字体大小:400;
边缘顶部:2米;
最大宽度:50%;
}

这是一个大的
英雄副本,请对
这个网站说几句
话。 一天早上,当格雷戈·萨姆萨从噩梦中醒来时,他发现自己在床上变成了一个可怕的害虫。他躺在盔甲般的背上,如果他稍微抬起头,就能看到他棕色的腹部,略微呈圆顶状,被拱门隔开 分成僵硬的部分。一天早上,当格雷戈·萨姆萨从噩梦中醒来时,他发现自己在床上变成了一个可怕的害虫

床上用品几乎无法盖住它,似乎随时都可能滑落。他的许多腿,与他其余的人相比,瘦弱得可怜,看着他无助地挥舞着。“我怎么了?”他想。这不是梦。伊斯 房间,一个真正的人的房间,虽然有点太小,平静地躺在它熟悉的四堵墙之间

桌子上摊开了一批纺织品样品——萨姆萨是一名旅行推销员——上面挂着一张他最近从一本插图杂志上剪下来的照片,照片放在一个漂亮的镀金框架内。它显示一位女士配备了
一顶毛皮帽子和毛皮蟒蛇,直立着坐着,向观众举起一个覆盖着整个下手臂的沉重的毛皮套。

解决方案是将最后一个滚动位置设置为与实际滚动位置不同。因此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))

我也尝试了
parseInt
而不是
parseFloat
,但没有成功,只会使复制更加困难
Math.floor()
Math.ceil()
也不起作用。