咨询窗口宽度变化时动态调整元素margin的代码实现问题

原代码的核心问题 #

• 数组arr仅在初始化时存入一次窗口宽度，resize事件触发后从未更新数组内容，导致后续reduce操作完全无法获取最新的窗口宽度数据。
• 错误使用reduce方法：reduce的设计目的是对数组元素进行累加或迭代处理，用它来对比当前与历史窗口宽度完全不符合其使用场景，且回调函数中对参数的逻辑理解完全错误。
• 未在resize事件中获取当前窗口宽度，也未与上一次记录的宽度做有效对比，仅靠无意义的x变量增减修改margin，逻辑完全偏离需求。
• 未处理窗口宽度不变的情况，会导致margin被无意义地反复修改。

正确实现方案 #

核心逻辑：记录上一次的窗口宽度，每次resize时获取当前宽度，对比两者大小后调整元素margin，同时更新记录的宽度值。

const targetElement = document.getElementById("resize");
// 初始化记录上一次的窗口宽度
let lastWidth = window.innerWidth;
// 初始化margin值，可根据需求调整初始值
let currentMargin = 0;

window.addEventListener("resize", () => {
  const currentWidth = window.innerWidth;
  
  // 对比当前宽度与上一次宽度，调整margin
  if (currentWidth > lastWidth) {
    // 窗口变宽，margin增加（步长可自定义）
    currentMargin += 1;
  } else if (currentWidth < lastWidth) {
    // 窗口变窄，margin减少，避免出现负数margin
    currentMargin = Math.max(0, currentMargin - 1);
  }
  
  // 将计算后的margin应用到元素
  targetElement.style.marginTop = `${currentMargin}px`;
  
  // 更新上一次的窗口宽度记录
  lastWidth = currentWidth;
});

补充说明 #

• 代码中用Math.max(0, currentMargin - 1)是为了防止margin变成负数，如果你允许元素出现负margin，可以直接写成currentMargin -= 1。
• 每次增减的步长（示例中是1px）可以根据需求修改，比如改成2px或其他数值。
• 如果需要同时调整多个margin方向（如marginLeft、marginBottom），只需在对应的分支中修改对应的样式属性即可。

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