如何在导航栏图片缩至指定高度前禁用下方内容滚动？

要实现导航栏未缩到指定高度时禁用页面内容滚动，核心是在导航栏缩放过程中拦截页面滚动行为，仅让导航栏完成缩放动画后再允许正常滚动。以下是修改后的代码及说明：

修改后的完整代码 #

// 标记是否允许页面正常滚动
let allowPageScroll = false;
// 导航栏图片的最小高度阈值（对应你设置的10vh）
const minHeaderSize = 10;

var scrollCn = function(quantity) {
  const scrollTop = Math.round((window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0));
  
  let size = 100 - Math.round(((scrollTop / quantity) || 0));
  if(size <= minHeaderSize) {
    size = minHeaderSize;
    allowPageScroll = true; // 达到最小高度，允许页面滚动
  } else {
    allowPageScroll = false; // 未达到，禁止页面滚动
  }

  document.querySelector('#header-img').setAttribute('style', `height: ${size}vh; width: ${size}%;`);
};

// 监听滚动，控制页面滚动行为
window.addEventListener('scroll', function(e) {
  if(!allowPageScroll) {
    // 计算导航栏缩到最小高度所需的最大滚动距离
    const maxScrollForHeader = (100 - minHeaderSize) * quantity;
    // 固定滚动位置，避免页面内容提前滑动
    if(window.pageYOffset > maxScrollForHeader) {
      window.scrollTo(0, maxScrollForHeader);
    }
    e.preventDefault();
  }
});

// 初始化时调用（替换成你实际使用的quantity参数）
// scrollCn(500);

关键逻辑说明 #

• 状态标记：用allowPageScroll控制滚动权限，只有导航栏高度到达设定的最小值时，才允许页面正常滚动。
• 滚动拦截：在滚动事件中，若未达到最小高度，直接阻止默认滚动行为，并将页面滚动位置固定到导航栏刚好完成缩放的位置，确保只有导航栏在变化，下方内容不会提前滑动。
• 阈值计算：maxScrollForHeader根据导航栏从100vh缩到10vh的逻辑反推得出，保证导航栏缩放完成后才放开滚动权限。

注意事项 #

• 替换代码中的quantity为你原本调用scrollCn时传入的数值。
• 若页面有其他滚动相关逻辑，需确保此拦截逻辑不会与之冲突。

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