Vanilla JS：swup.js页面切换后重新初始化函数的实现方法

嘿，你已经走在正确的路上了！用swup的contentReplaced事件来重新初始化JS逻辑是完全正确的做法——毕竟swup替换页面内容后，原来的DOM元素会被移除，之前绑定的事件自然就失效了，必须重新获取新元素并绑定事件。

我来帮你完善代码里的细节：

首先，你的基础结构是对的 #

body底部的这段代码没问题，它初始化swup，首次调用init，并且在每次页面内容替换完成后重新执行init：

const swup = new Swup();
init();
swup.on('contentReplaced', init);

接下来修正main.js里的init函数 #

你需要解决几个小问题：元素存在性判断、未定义的elementWidth，还有优化按钮状态逻辑：

function init() {
  // 先获取所有需要用到的DOM元素
  const hozScroller = document.getElementById('hoz-scroller');
  const buttonLeft = document.getElementById('slide-left');
  const buttonRight = document.getElementById('slide-right');

  // 只有当所有元素都存在时才执行后续逻辑，避免在没有这些元素的页面报错
  if (hozScroller && buttonLeft && buttonRight) {
    // 计算滚动容器需要滚动的总宽度（内容总宽度 - 容器可视宽度）
    const elementWidth = hozScroller.scrollWidth - hozScroller.clientWidth;

    // 定义滚动函数
    function scrollLeft() {
      hozScroller.scrollTo({ left: 0, behavior: 'smooth' });
      buttonLeft.classList.add('disabled');
      // 点击左滚后，右滚按钮肯定应该恢复可用，直接移除disabled类即可
      buttonRight.classList.remove('disabled');
    }

    function scrollRight() {
      hozScroller.scrollTo({ left: elementWidth, behavior: 'smooth' });
      buttonRight.classList.add('disabled');
      // 同理，点击右滚后左滚按钮恢复可用
      buttonLeft.classList.remove('disabled');
    }

    // 为按钮绑定点击事件
    buttonLeft.onclick = scrollLeft;
    buttonRight.onclick = scrollRight;

    // 可选：页面初始化时根据当前滚动位置设置按钮状态
    if (hozScroller.scrollLeft === 0) {
      buttonLeft.classList.add('disabled');
    } else {
      buttonLeft.classList.remove('disabled');
    }
    if (hozScroller.scrollLeft >= elementWidth) {
      buttonRight.classList.add('disabled');
    } else {
      buttonRight.classList.remove('disabled');
    }
  }
}

关键说明： #

1. 元素存在性判断：如果某个页面没有hoz-scroller或那两个按钮，直接执行后续代码会导致控制台报错，所以先判断元素是否存在再执行。
2. elementWidth的定义：之前你没定义这个变量，这里计算的是滚动容器需要滚动到最右侧的距离，确保滚动行为正确。
3. 按钮状态优化：不用判断按钮是否包含disabled类，直接添加/移除更简洁，逻辑也更清晰。
4. 初始化按钮状态：页面加载时就根据当前滚动位置设置按钮的禁用状态，提升用户体验。

这样修改后，每次swup切换页面完成，contentReplaced事件触发init函数，就会重新获取新页面的按钮元素并绑定点击事件，你的滚动功能就能在所有页面正常工作了！

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