如何避免Reveal.js滚动跳转脚本在窗口全屏化时自动触发？

问题根源在于：浏览器切换全屏时，元素的innerHeight会发生变化，导致scrollTop + innerHeight的计算值刚好等于scrollHeight，进而触发绑定的scroll事件和跳转逻辑，但这并非用户主动滚动操作。

可以通过添加防抖处理的resize监听+状态标记来区分用户主动滚动和窗口尺寸变化触发的scroll事件，修改后的代码如下：

jQuery(function ($) {
  let isResizing = false;
  let resizeTimeout;

  // 监听窗口resize事件，用防抖处理避免连续触发
  $(window).on('resize', function() {
    isResizing = true;
    clearTimeout(resizeTimeout);
    // 防抖延迟：300ms足够覆盖全屏切换的尺寸变化过程
    resizeTimeout = setTimeout(() => {
      isResizing = false;
    }, 300);
  });

  $("#creation").on("scroll", function () {
    // 如果处于resize过程中，直接跳过判断
    if (isResizing) return;

    if (
      Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >=
      Math.round($(this)[0].scrollHeight, 10)
    ) {
      location.hash = "#film";
    }
  });
});

代码说明 #

• 新增isResizing状态变量，标记当前是否处于窗口尺寸变化过程中
• 用防抖函数处理resize事件：全屏切换会连续触发resize，设置300ms延迟，确保尺寸稳定后再把isResizing设为false
• 在scroll事件回调开头增加判断，若处于resize状态则直接返回，不执行跳转逻辑

另外，也可以通过判断scroll事件的isTrusted属性（该属性标记事件是否由用户行为触发）来优化，不过兼容性略差（IE不支持），代码示例如下：

jQuery(function ($) {
  $("#creation").on("scroll", function (e) {
    // 仅当事件由用户主动触发时才执行判断
    if (!e.isTrusted) return;

    if (
      Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >=
      Math.round($(this)[0].scrollHeight, 10)
    ) {
      location.hash = "#film";
    }
  });
});

推荐第一种方案，兼容性更好，能覆盖所有场景。

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