如何解决自定义滚动固定后无法切换至三个区块的问题？

哈哈，我明白你遇到的问题了——之前的代码相当于把滚动条直接焊死在250的位置，只要你一动就给拽回去，自然没法滚动到其他区块啦！别着急，咱们来改改逻辑，让滚动能在三个区块之间顺畅切换：

要实现「滚动到固定区块」的效果，关键是判断滚动方向+定位目标区块位置，同时要避免「设置scrollTop触发scroll事件→再次设置scrollTop→无限循环」的死锁问题。

1. 先准备基础结构 #

假设你的HTML是这样的三个区块：

<div class="scroll-block">
  <div class="section">区块1</div>
  <div class="section">区块2</div>
  <div class="section">区块3</div>
</div>

给区块加个全屏样式方便测试：

.scroll-block {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth; /* 可选，让滚动更丝滑 */
}
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.section:nth-child(1) { background: #f5f5f5; }
.section:nth-child(2) { background: #e5e5e5; }
.section:nth-child(3) { background: #d5d5d5; }

2. 原生JS实现代码 #

const scrollBlock = document.querySelector('.scroll-block');
const sections = document.querySelectorAll('.section');
// 预存每个区块相对于滚动容器的顶部位置
const sectionPositions = Array.from(sections).map(sec => sec.offsetTop);
let lastScrollTop = 0;
let isScrolling = false; // 防止滚动事件循环触发

scrollBlock.addEventListener('scroll', () => {
  if (isScrolling) return; // 正在执行滚动动画时，忽略此次事件

  const currentScrollTop = scrollBlock.scrollTop;
  // 判断滚动方向：向上/向下
  const scrollDirection = currentScrollTop > lastScrollTop ? 'down' : 'up';

  // 找到当前所在的区块索引
  let currentIndex = sectionPositions.findIndex(pos => pos > currentScrollTop) - 1;
  // 处理边界：滚动到最顶部时，索引设为0
  if (currentIndex < 0) currentIndex = 0;
  // 滚动到最底部时，索引设为最后一个区块
  if (currentIndex >= sectionPositions.length) currentIndex = sectionPositions.length - 1;

  // 根据滚动方向确定目标位置
  let targetPos;
  if (scrollDirection === 'down') {
    // 向下滚→跳转到下一个区块（如果不是最后一个）
    targetPos = currentIndex < sectionPositions.length - 1 
      ? sectionPositions[currentIndex + 1] 
      : sectionPositions[currentIndex];
  } else {
    // 向上滚→跳转到上一个区块（如果不是第一个）
    targetPos = currentIndex > 0 
      ? sectionPositions[currentIndex - 1] 
      : sectionPositions[currentIndex];
  }

  // 只有目标位置和当前位置不同时，才执行滚动
  if (targetPos !== currentScrollTop) {
    isScrolling = true;
    scrollBlock.scrollTo({
      top: targetPos,
      behavior: 'smooth'
    });
    // 滚动结束后重置标志位（用scrollend事件更准确）
    scrollBlock.addEventListener('scrollend', () => {
      isScrolling = false;
    }, { once: true });
  }

  lastScrollTop = currentScrollTop;
});

3. jQuery版本（适配你的原代码习惯） #

const $scrollBlock = $('.scroll-block');
const $sections = $('.section');
// 预存每个区块相对于滚动容器的顶部位置
const sectionPositions = $sections.map(function() {
  return $(this).offset().top - $scrollBlock.offset().top;
}).get();
let lastScrollTop = 0;
let isScrolling = false;

$scrollBlock.on('scroll', function() {
  if (isScrolling) return;

  const currentScrollTop = $(this).scrollTop();
  const scrollDirection = currentScrollTop > lastScrollTop ? 'down' : 'up';

  let currentIndex = sectionPositions.findIndex(pos => pos > currentScrollTop) - 1;
  if (currentIndex < 0) currentIndex = 0;
  if (currentIndex >= sectionPositions.length) currentIndex = sectionPositions.length - 1;

  let targetPos;
  if (scrollDirection === 'down') {
    targetPos = currentIndex < sectionPositions.length - 1 
      ? sectionPositions[currentIndex + 1] 
      : sectionPositions[currentIndex];
  } else {
    targetPos = currentIndex > 0 
      ? sectionPositions[currentIndex - 1] 
      : sectionPositions[currentIndex];
  }

  if (targetPos !== currentScrollTop) {
    isScrolling = true;
    $(this).animate({ scrollTop: targetPos }, 500, function() {
      isScrolling = false;
    });
  }

  lastScrollTop = currentScrollTop;
});

• 避免循环触发：用isScrolling标志位拦截主动滚动时触发的scroll事件，防止死循环。
• 动态位置适配：如果区块高度是动态变化的（比如加载异步内容），需要重新计算sectionPositions，可以监听resize或内容变化事件更新。
• 边界处理：专门判断了滚动到第一个/最后一个区块的情况，不会出现越界问题。

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