如何将页面当前滚动到的条目位置存储到URL中

1. 核心实现逻辑 #

• 页面初始化阶段：解析URL查询参数中的scroll_position值，存在有效值时直接滚动到对应序号的条目
• 滚动监听阶段：监听页面滚动事件，判断当前视口内最靠前的条目序号，无刷新更新URL的查询参数即可

2. 具体代码实现（原生JS版本，无需额外框架） #

先统一列表条目的DOM结构，每个条目绑定序号属性：

<div class="inventory-item" data-index="1">条目1内容</div>
<div class="inventory-item" data-index="2">条目2内容</div>
<!-- 剩余98条同理，data-index和条目序号一一对应 -->

2.1 页面加载时读取URL参数跳转指定条目 #

// 解析URL查询参数工具函数
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

// 页面加载完成后执行跳转逻辑
window.addEventListener('load', () => {
  const targetPos = getQueryParam('scroll_position');
  // 校验参数为有效数字
  if (targetPos && !isNaN(Number(targetPos))) {
    const targetItem = document.querySelector(`.inventory-item[data-index="${targetPos}"]`);
    if (targetItem) {
      // behavior设为'smooth'可开启平滑滚动，auto为直接跳转
      targetItem.scrollIntoView({ behavior: 'auto', block: 'start' });
    }
  }
})

2.2 监听滚动实时更新URL参数 #

增加防抖处理避免滚动时频繁触发URL更新，兼顾性能和灵敏度：

// 防抖函数，默认200ms延迟可自行调整
function debounce(func, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 判断元素是否处于视口顶部可见区域
function isInViewportTop(el, offset = 0) {
  const rect = el.getBoundingClientRect();
  return rect.top >= offset && rect.top <= window.innerHeight / 3;
}

// 无刷新更新URL的scroll_position参数
function updateScrollPosParam(index) {
  const url = new URL(window.location);
  url.searchParams.set('scroll_position', index);
  // 用replaceState不会新增历史记录，换成pushState可支持前进后退按钮跳转滚动位置
  window.history.replaceState({}, '', url);
}

// 滚动事件处理逻辑
const handleScroll = debounce(() => {
  const items = document.querySelectorAll('.inventory-item');
  for (let item of items) {
    if (isInViewportTop(item)) {
      const currentIndex = item.dataset.index;
      // 参数无变化时不执行更新，减少无用操作
      if (currentIndex !== getQueryParam('scroll_position')) {
        updateScrollPosParam(currentIndex);
      }
      break;
    }
  }
})

// 绑定滚动事件
window.addEventListener('scroll', handleScroll);

3. 注意事项 #

• 如果使用虚拟滚动方案，需要先保证目标序号的条目已经渲染完成再执行滚动逻辑，否则会找不到对应DOM元素
• 若需要支持浏览器前进后退按钮同步滚动，可额外监听popstate事件，触发后重新读取URL参数执行滚动操作即可
• 条目序号data-index默认按1开头和示例格式匹配，若需要0开头直接调整DOM的属性值即可

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture