IntersectionObserver滚动异常：固定按钮滚动卡顿问题排查

导致滚动卡顿的核心原因有这几点：

• 滚动事件触发过于频繁：scroll事件在滚动过程中会被高频触发，每次触发都执行DOM查询（$('.btn')）、获取元素偏移量（offset().top）以及类名操作，这些都会触发浏览器的重排/重绘，频繁执行直接阻塞主线程。
• 动态偏移量计算的额外开销：当按钮被设置为position: fixed后，它脱离了文档流，此时每次调用$('.btn').offset().top都会重新计算元素位置，这是不必要的性能消耗。
• 无防抖处理：没有对滚动事件做节流/防抖，导致短时间内大量重复执行相同逻辑，加剧性能损耗。

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="btn">button</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info" id="end">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>

CSS（无需修改） #

.info {
  margin: 100px auto;
  text-align: center;
}

.btn {
  width: 200px;
  padding: 12px 50px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
}

.fixed {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript（优化版） #

// 缓存DOM元素，避免重复查询
const $btn = $('.btn');
const $end = $('#end')[0];
// 提前计算按钮初始的偏移量，固定后不再变化
const btnInitialTop = $btn.offset().top;
let isFooterVisible = false;
let isBtnFixed = false;

// 防抖函数：减少滚动事件触发频率
function debounce(func, delay = 16) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 滚动处理逻辑
function handleScroll() {
  const scrollTop = $(document).scrollTop();
  // 只有当状态需要改变时才执行DOM操作
  if (scrollTop > btnInitialTop && !isFooterVisible && !isBtnFixed) {
    $btn.addClass('fixed');
    isBtnFixed = true;
  } else if ((scrollTop <= btnInitialTop || isFooterVisible) && isBtnFixed) {
    $btn.removeClass('fixed');
    isBtnFixed = false;
  }
}

// 节流后的滚动事件绑定
$(document).scroll(debounce(handleScroll));

// IntersectionObserver逻辑保持，优化判断逻辑
function isIntoView(entries) {
  const entry = entries[0];
  if (entry.target.id === 'end') {
    isFooterVisible = entry.isIntersecting;
    // 当footer可见时，若按钮处于固定状态则取消固定
    if (isFooterVisible && isBtnFixed) {
      $btn.removeClass('fixed');
      isBtnFixed = false;
    }
  }
}

const observer = new IntersectionObserver(isIntoView, {
  root: null,
  rootMargin: '0px',
  threshold: 0
});
observer.observe($end);

• 缓存DOM与初始值：提前获取按钮元素和它的初始偏移量，避免每次滚动都做DOM查询和动态计算。
• 防抖处理：用防抖函数控制滚动逻辑的执行频率，减少不必要的计算和DOM操作，降低主线程压力。
• 状态判断优化：增加isBtnFixed状态变量，只有当类名需要改变时才执行addClass/removeClass，避免重复操作DOM。
• 简化Observer逻辑：直接取第一个entry，减少循环开销，同时联动按钮固定状态，确保状态一致。

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