Facebook好友请求列表自动滚动咨询：无需鼠标悬停触发滚动

问题分析 #

Facebook的好友请求滚动区域采用了动态初始化机制：只有当鼠标悬停在区域内或手动触发滚动后，才会生成带有.x1p6kkr5类的滚动容器，同时显示滚动条。直接在初始状态下调用document.querySelector('.x1p6kkr5')会返回null，导致报错。

解决方案 #

可以通过两种方式绕过鼠标交互的限制，实现自动滚动：

方案1：强制初始化滚动容器（无需模拟鼠标事件）

通过定位更上层的稳定父容器，强制修改CSS让滚动条始终显示，触发容器的滚动功能初始化，再实现滚动到底部（包含懒加载处理）：

// 定位好友请求列表的根容器（用aria-label或role属性更稳定，避免类名变动）
const rootContainer = document.querySelector('[aria-label="好友请求"]') || document.querySelector('[role="listbox"]');

if (rootContainer) {
  // 强制容器显示垂直滚动条，触发滚动功能初始化
  rootContainer.style.overflowY = 'scroll';
  rootContainer.style.maxHeight = '90vh'; // 可选，限制容器高度确保滚动条生效

  // 递归滚动到底部，处理懒加载（滚动后加载新请求）
  const scrollToBottom = () => {
    const currentScrollHeight = rootContainer.scrollHeight;
    rootContainer.scrollTop = currentScrollHeight;

    // 等待1秒检查是否加载了新内容，若有则继续滚动
    setTimeout(() => {
      if (rootContainer.scrollHeight > currentScrollHeight) {
        scrollToBottom();
      } else {
        console.log('已滚动到最底部');
      }
    }, 1000); // 可根据网络速度调整等待时间
  };

  scrollToBottom();
} else {
  console.error('未找到好友请求容器，请检查页面DOM结构');
}

方案2：模拟鼠标悬停触发容器初始化

通过模拟鼠标悬停事件，触发Facebook的动态滚动容器生成，再执行滚动操作：

// 定位好友请求的外层容器
const requestContainer = document.querySelector('[aria-label="好友请求"]');

if (requestContainer) {
  // 模拟鼠标悬停事件，触发滚动容器的动态生成
  const hoverEvent = new MouseEvent('mouseover', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  requestContainer.dispatchEvent(hoverEvent);

  // 等待DOM更新后获取滚动元素
  setTimeout(() => {
    const scrollElement = document.querySelector('.x1p6kkr5');
    if (scrollElement) {
      // 递归滚动处理懒加载
      const autoScroll = () => {
        const prevHeight = scrollElement.scrollHeight;
        scrollElement.scrollIntoView({ block: 'end', behavior: 'smooth' });
        
        setTimeout(() => {
          scrollElement.scrollHeight > prevHeight ? autoScroll() : console.log('滚动完成');
        }, 1200);
      };
      autoScroll();
    } else {
      console.error('滚动容器未生成，请检查选择器');
    }
  }, 600); // 等待容器生成的时间
}

关键注意点 #

1. 选择器稳定性：优先使用aria-label、role等语义化属性定位容器，避免依赖Facebook频繁变动的动态类名（如.x1p6kkr5）。
2. 懒加载处理：Facebook滚动到底部会加载新的好友请求，因此需要递归检查滚动高度变化，直到没有新内容加载为止。
3. 等待时间调整：根据网络速度调整setTimeout的等待时间，确保新内容有足够时间加载完成。

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