为何$scope无法作为选择器生效，类选择器却可正常使用？

我在Elementor前端钩子中尝试用$scope作为选择器传入lax.addElements()，但没有达到预期的滚动透明度动画效果；换成类选择器（比如.element-class）却能正常工作。我希望保留使用$scope的方式，想知道问题出在哪以及怎么修复。

"use strict";
(function ($) {
  const $window = $(window);
  $window.on('elementor/frontend/init', function () {
    elementorFrontend.hooks.addAction('frontend/element_ready/widget', function ($scope) {
      const settings = $scope.data('settings');
      if (settings && settings.codexse_scroll === 'yes') {
          lax.init();
          lax.addDriver('scrollY', function () {
            return window.scrollY;
          });
          lax.addElements($scope, {
            scrollY: {
              opacity: [
                ["elInY", "elCenterY", "elOutY"],
                [0, 1, 0],
              ]
            }
          });
      }
    });
  });
})(jQuery);

问题原因 #

• lax.js的参数限制：lax.addElements()仅支持原生DOM元素或CSS选择器字符串，你传入的$scope是jQuery包装后的对象，lax.js无法直接解析jQuery对象的内部结构。
• 类选择器生效逻辑：当传入类选择器字符串时，lax.js内部会自动调用原生DOM查询方法（如document.querySelectorAll()）获取对应元素，所以能正常触发动画。

修复方案 #

方案1：将jQuery对象转为原生DOM元素 #

jQuery对象本质是原生DOM元素的集合，直接通过[0]或.get(0)提取第一个元素即可：

"use strict";
(function ($) {
  const $window = $(window);
  $window.on('elementor/frontend/init', function () {
    elementorFrontend.hooks.addAction('frontend/element_ready/widget', function ($scope) {
      const settings = $scope.data('settings');
      if (settings && settings.codexse_scroll === 'yes') {
          lax.init();
          lax.addDriver('scrollY', function () {
            return window.scrollY;
          });
          // 提取原生DOM元素传入
          lax.addElements($scope[0], {
            scrollY: {
              opacity: [
                ["elInY", "elCenterY", "elOutY"],
                [0, 1, 0],
              ]
            }
          });
      }
    });
  });
})(jQuery);

方案2：从jQuery对象生成合法选择器 #

如果需要兼容多元素场景，可以从$scope中提取元素的唯一标识（如ID或类名）生成选择器字符串：

"use strict";
(function ($) {
  const $window = $(window);
  $window.on('elementor/frontend/init', function () {
    elementorFrontend.hooks.addAction('frontend/element_ready/widget', function ($scope) {
      const settings = $scope.data('settings');
      if (settings && settings.codexse_scroll === 'yes') {
          lax.init();
          lax.addDriver('scrollY', function () {
            return window.scrollY;
          });
          // 优先用ID作为选择器，无ID则处理类名生成选择器
          const selector = $scope.attr('id') 
            ? '#' + $scope.attr('id') 
            : '.' + $scope.attr('class').replace(/\s+/g, '.');
          lax.addElements(selector, {
            scrollY: {
              opacity: [
                ["elInY", "elCenterY", "elOutY"],
                [0, 1, 0],
              ]
            }
          });
      }
    });
  });
})(jQuery);

注意事项 #

• 方案1性能更优，直接复用已获取的DOM元素，无需重新查询；
• 方案2处理类名时，需替换空格为.，避免生成无效选择器；
• 若$scope是多元素集合，需遍历每个元素分别传入lax.addElements()。

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