Javascript 调用一个调整大小事件-该事件对滚动没有反应？

我希望div具有视口的最小高度。 因此，我使用Javascript检测窗口高度并设置样式属性（因为移动浏览器的高度行为）。

我想在方向更改或浏览器窗口更改时调整高度。 因此，我创建了一个调整大小事件

这就是我的问题——当你滚动页面时，resize事件也会被触发。 因此，在向下滚动时，内容会出现这种丑陋的跳跃

有人能解决这个问题吗？！ 这经常困扰着我：(

编辑-以下是一个简单的示例：

var vpHeight=window.innerHeight；
//设置样式属性
document.documentElement.style.setProperty（'--vpHeight'，`${vpHeight}px`）；
//在调整大小时执行相同的操作
window.addEventListener（'resize'，（）=>{
var vpHeight=window.innerHeight；
document.documentElement.style.setProperty（'--vpHeight'，`${vpHeight}px`）；
})；

*{
保证金：0；
填充：0；
}
身体{
背景颜色：鲑鱼；
}
#全高{
宽度：100%；
背景颜色：淡紫色；
显示：块；
位置：相对位置；
高度：var（--vpHeight，100vh）；
}
#全高：：后{
内容：''；
位置：绝对位置；
底部：0；
左：50%；
左边距：-25px；
宽度：50px；
高度：50px；
背景色：黑色；
}

《自然科学》和《自然科学》都是一本书的作者，他是一位杰出的艺术大师。他是一位杰出的艺术大师。他是一位杰出的艺术大师。他是一位伟大的艺术家，他是一位杰出的艺术家艾特·埃吉特，阿库。埃尼姆·胡斯托，朗卡斯·尤特，伊佩尔·维塔伊，胡斯托。维塔伊。维塔伊。维塔伊。维塔伊。维塔伊。维塔伊。维塔伊。维塔伊。维塔伊。埃尼姆。维塔伊。埃尼。阿利卡。维塔伊。埃尼。阿利卡。维塔伊。埃利。维塔伊。埃芬。埃尼。阿利姆。安特。阿利姆。阿利姆。阿利姆。安特。达皮斯。克拉斯。维塔伊。维塔伊。维塔伊。埃拉。维塔伊。维特这是一种新的植物，它的品种包括葡萄品种、金雀花、埃尼亚的不规则饮食、奥古斯都的乌尔特里斯酒、乌尔兰科乌尔特里斯酒

南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉特对。南埃吉厄洛斯·福西布斯·廷西登。两个狮子座。两个毛里斯坐在阿梅特·尼布的旁边。两个射手座。两个狮子座，两个射手座，奥古斯特·维利特·库苏斯·努克，一个自由的孕妇。一个聪明的智者。前庭purus quam，权杖ut，mollis Sed，nonummy id，metus。dui中的Nullam acumsan lom。Cras ultrices我叫亨德雷特·弗林利亚（hendrerit fringilla），是一个位于同侧前庭前的前庭，位于肘部；位于连续的前庭

不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不这是一个前庭。这是一个厄洛斯，这是一个地狱。这是一个地狱，这是一个地狱，这是一个地狱。这是一个地狱。这是一个地狱关于，尤伊斯莫德·维塔，波苏尔·因佩雷特，利奥。梅塞纳斯·马莱苏亚达。马萨的一家餐馆。塞德·维塔·托托·图皮斯·波苏尔·瓦普特·阿库

前庭位于同侧前庭，位于前庭右侧，位于前庭右侧，前庭位于前庭右侧，前庭位于前庭右侧，前庭位于前庭右侧，前庭位于前庭右侧一只脚坐在阿梅特·奥古斯。在图尔皮斯。佩伦特·波苏尔。普雷森特·图尔皮斯。埃尼安·波苏尔，图尔皮斯·福吉亚，努克·奥古斯·布朗迪特·努克，欧盟索尔利西图丁·乌纳·多洛·萨吉提斯·拉库斯。自由精英，苏打啤酒，奥里帕特·帕特·a，苏西比特·农，图尔皮斯。萨吉提斯。普尔姆·萨吉提斯。普尔维纳尔酒，奥古斯·ac·威尼斯调味品，西姆·萨吉奥·帕特·尼布，东北在大酒城，一个居住着摩比·特里斯蒂克·塞内特斯和内特斯·梅勒达·梅勒德斯·梅勒斯·莫利斯·内克·佩勒特斯的居民莫比·特里斯蒂克·塞内特斯和内特斯·梅勒达·梅勒斯·佩勒斯特·佩勒斯特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·佩利特·，波苏尔·埃吉特、门厅等、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人、临时拍卖人ugiat.Vivamus quis mi.Phasellus a est.Phasellus magna.在hac Habitase platea dictumst.Curabitur at lacus ac velit ornare lobortis.Curabitur a felis In Nuc fringilla tristique.

并不是在每个卷轴上都调用了一个调整大小事件，而是用户在一些手机或水下手机上一开始滚动时实际上有一个调整大小事件当他们返回到第一个页面顶部时——是浏览器窗口顶部的选项卡来来去去去——100vh不能像人们期望的那样“工作”的原因。在移动浏览器中这样做是为了在进行“普通”滚动时停止跳转效果，但当然在这种情况下，布局会根据动作而改变

<style>
* {
  margin:0;
  padding:0;
}
body {
  background-color:salmon;
}

#fullheight {
  width:100%;
  background-color:lavender;
  display:block;
  position:relative;
  height:var(--vpHeight, 100vh);
  transition: height 0.3s; /* ADDED */
}

#fullheight::after {
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-25px;
  width:50px;
  height:50px;
  background-color:black;
}
</style>
<div id="fullheight"></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>

<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>

<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.</p>

<p>Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</p>
<script>
var vpHeight = window.innerHeight;
// set style property
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
// do the same on resize
window.addEventListener('resize', () => {
  var vpHeight = window.innerHeight;
  document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
});
</script>