滚动到指定元素后模糊页面内容，消除模糊DIV的空白间隙

你现在的问题出在.blurTest是正常文档流里的块级元素，又设置了height:100vh，所以硬生生占了一整个视口高度，把para5挤到了后面。解决关键是让模糊容器脱离文档流，同时保持它能覆盖后续内容，下面给两种可行方案：

方案一：修改.blurTest的定位方式 #

直接调整模糊容器的CSS，让它不占用文档流空间：

.blurTest {
  position: fixed; /* 脱离正常文档流，固定在视口内 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none; /* 避免模糊层阻挡后面元素的点击、滚动等交互 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 滚动到para4时添加的激活类，显示模糊效果 */
.blurTest.active {
  opacity: 1;
}

这样调整后，.blurTest不会挤占para4和para5之间的空间，para5会自然紧跟para4，同时滚动到目标位置时，模糊层会覆盖整个视口，实现你要的模糊后续内容的效果。

方案二：直接给后续内容容器加模糊 #

如果只需要模糊para4之后的内容，更直接的方式是把这些内容单独放到一个容器里，滚动时给这个容器加模糊样式，完全不会产生空白问题：

<!-- 页面结构示例 -->
<div class="page-content">
  <p id="para1">...</p>
  <p id="para2">...</p>
  <p id="para3">...</p>
  <p id="para4">...</p>
  <!-- 把para4之后的内容单独包裹 -->
  <div class="post-para4">
    <p id="para5">...</p>
    <!-- 其他后续内容 -->
  </div>
</div>

/* 模糊样式 */
.post-para4.blur {
  filter: blur(8px);
  /* 可选：如果需要降低透明度增强模糊感 */
  opacity: 0.8;
}

通过JS监听滚动事件，当para4进入视口时，给.post-para4添加.blur类即可。

内容的提问来源于stack exchange，提问作者sidgate