如何使用Dom7实现滚动时的Div模糊效果？新手求助

你的代码执行到var pageBg = Dom7.$(".page-bg");后直接中断，本质是这一行抛出了未捕获的错误，导致后续代码完全无法运行。下面是具体排查和解决步骤：

1. 先确认Dom7是否正常加载 #

在那行代码前加一句日志，先搞清楚Dom7变量是否存在：

document.addEventListener("DOMContentLoaded", function () {
  console.log('Dom7状态:', typeof Dom7); // 查看控制台输出
  var pageBg = Dom7.$(".page-bg");
  // 后续代码...
});

如果控制台输出undefined，说明你根本没把Dom7库引进来：

• 必须在你的业务脚本之前，通过<script>标签引入Dom7的本地文件，比如：

  <script src="./libs/dom7.min.js"></script>
  

• 要是你用的是Framework7框架，Dom7是内置的，但不能直接用Dom7.$，得用初始化后的app.$来选择元素。

2. 新手友好方案：直接用原生JS替代Dom7 #

既然你觉得Dom7难理解，完全可以用原生JS实现需求，逻辑更直白，还能避免框架带来的坑：

document.addEventListener("DOMContentLoaded", function () {
  var pageBg = document.querySelector(".page-bg");
  // 先判断元素是否存在，防止后续报错
  if (!pageBg) {
    console.warn('找不到.page-bg元素');
    return;
  }
  
  var lastScrollTop = 0;
  var blurValue = 0;

  window.addEventListener("scroll", function () {
    var currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    // 简化边界判断逻辑
    blurValue = currentScrollTop > lastScrollTop 
      ? Math.min(blurValue + 0.5, 10) 
      : Math.max(blurValue - 0.5, 0);

    pageBg.style.filter = `blur(${blurValue}px)`;
    lastScrollTop = currentScrollTop;
  });
});

3. 关于LESS代码的小补充 #

你在.page-bg::after里写了backdrop-filter: blur(var(--blur));，但当前JS代码并没有操作这个CSS变量。如果想改用CSS变量控制模糊效果，可以把JS里设置filter的代码改成：

document.documentElement.style.setProperty('--blur', `${blurValue}px`);

同时调整LESS里的样式，把模糊效果统一用变量控制即可。

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