Wix网站滚动文本放大：JS转Velo代码遇document/style报错求助

原代码报错是因为Velo不支持直接操作document和原生DOM的style操作逻辑，以下是修改后的可运行Velo代码，以及关键修改点说明：

关键修改点 #

• 移除document事件监听：Velo中需给具体页面元素绑定滚轮事件，而非直接操作全局document
• 调整样式设置方式：Velo元素的样式通过.style属性设置，语法与原生JS类似，但需确保目标元素支持CSS transform属性
• 增加缩放边界限制（可选）：防止缩放比例过大/过小导致页面显示异常

完整Velo代码 #

$w.onReady(function () {
  const zoomElement = $w('#workspace'); // 替换为你页面中目标元素的实际ID
  let zoom = 1;
  const ZOOM_SPEED = 0.1;
  const MIN_ZOOM = 0.5; // 自定义最小缩放比例
  const MAX_ZOOM = 2; // 自定义最大缩放比例

  // 给页面绑定滚轮事件（替换#page1为你实际的页面ID，可在页面属性面板查看）
  $w('#page1').on('wheel', (event) => {
    // 根据滚轮方向更新缩放比例
    if (event.deltaY > 0) {
      zoom = Math.min(zoom + ZOOM_SPEED, MAX_ZOOM);
    } else {
      zoom = Math.max(zoom - ZOOM_SPEED, MIN_ZOOM);
    }
    // 应用缩放效果到目标元素
    zoomElement.style.transform = `scale(${zoom})`;
  });
});

注意事项 #

• 页面ID获取：在Wix编辑器中点击页面名称，右侧属性面板会显示页面ID，替换代码中的#page1
• 元素兼容性：确保#workspace是支持CSS transform的组件，比如Box容器、Text文本组件等
• 缩放参数调整：可根据需求修改ZOOM_SPEED、MIN_ZOOM、MAX_ZOOM的数值

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