如何实现仅允许向上滚动禁止向下滚动，解决滚动卡顿闪烁问题

DevOps 小满

2026-10-1

问题原因

你的现有实现属于「事后修正」逻辑：浏览器已经完成滚动动作、渲染完新的滚动位置后，才检测到超过50px阈值，再强行将页面拉回50px位置，两个连续渲染帧的位置差就会导致肉眼可见的跳动、闪烁。

优化方案

以下方案按实现成本、效果优先级排序：

方案1：CSS原生滚动实现（推荐，零闪烁性能最优）
把页面拆分为固定高度的顶部区和内容滚动区，用浏览器原生滚动规则实现需求，无需JS监听滚动事件，完全避免闪烁问题，同时不影响浮层菜单的展示逻辑。

<!-- 页面结构 -->
<div class="top-area"></div>
<div class="content-area">
  所有正文内容放在该容器内
</div>
<!-- 浮层菜单正常固定定位即可，不受结构影响 -->
<div class="float-menu"></div>

.top-area {
  height: 50px;
}
.content-area {
  /* 内容区高度占满剩余视口空间 */
  height: calc(100vh - 50px);
  /* 仅内容区可独立滚动，不会触发全局滚动超出阈值 */
  overflow-y: auto;
}
.float-menu {
  position: fixed;
  z-index: 999;
  /* 其他菜单样式正常配置即可 */
}

方案2：JS提前拦截滚动行为
不采用事后修正的逻辑，直接在滚动动作触发时拦截不符合规则的滚动，从根源避免位置跳动。需要注意绑定滚动事件时要关闭passive配置，否则无法调用preventDefault拦截默认行为。

// 事件绑定逻辑
window.addEventListener('wheel', this.handleScroll, { passive: false });
window.addEventListener('touchmove', this.handleScroll, { passive: false });
// 兜底兼容特殊场景的scroll事件
window.addEventListener('scroll', this.fixScrollPosition, { passive: true });

const SCROLL_THRESHOLD = 50;
let lastScrollPos = window.scrollY;

// 滚动拦截逻辑
handleScroll(e) {
  const currentScroll = window.scrollY;
  // deltaY>0代表向下滚动，<0代表向上滚动
  const isScrollDown = e.deltaY > 0;

  // 已到达阈值且继续向下滚动时，直接拦截默认滚动行为
  if (currentScroll >= SCROLL_THRESHOLD && isScrollDown) {
    e.preventDefault();
    // 对齐到阈值位置，消除像素误差
    window.scrollTo(0, SCROLL_THRESHOLD);
    return false;
  }
  lastScrollPos = currentScroll;
}

// 兜底修正逻辑，避免特殊场景下超出阈值
fixScrollPosition() {
  if (window.scrollY > SCROLL_THRESHOLD) {
    window.scrollTo(0, SCROLL_THRESHOLD);
  }
}

方案3：现有逻辑最小改动优化
如果不想修改现有逻辑结构，可以通过requestAnimationFrame将位置修正操作提前到浏览器渲染前执行，大幅降低闪烁概率：

onScroll() {
  this.newValue = window.scrollY;
  if (this.newValue > 50 && this.oldValue < this.newValue) {
    // 将修正操作放入渲染队列最前端，减少视觉差
    requestAnimationFrame(() => {
      window.scroll(0, 50);
    })
  }
  this.oldValue = this.newValue;
}

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