Element.scrollTop始终返回0 元素滚动到底部检测异常排查

• scrollTop始终返回0的核心原因是你绑定的.faq元素根本不是实际的滚动容器：你只给.faq设了overflow: scroll，但没有给元素设置受限高度，元素高度完全由内部内容撑开，自身不会产生滚动条，自然scrollTop永远是0。
• Slick轮播库会自动在自定义Slide外层套3层DOM节点：.slick-list、.slick-track、包裹单个slide的div，默认配置下轮播靠transform偏移实现滑动，不是原生滚动，且默认.slick-list设了overflow: hidden，会截断内部溢出内容。
• 全局body、.container都设置了overflow: hidden，根节点也不存在原生滚动条，当前页面没有任何滚动事件绑定在.faq元素上。

1. 补全CSS规则，让.faq成为独立滚动容器 #

首先补全高度传递规则，让滚动发生在.faq元素内部，同时避免和Slick的滑动逻辑冲突：

/* 补全Slick生成节点的高度规则，打通高度传递链路 */
.scrollCarousel .slick-list,
.scrollCarousel .slick-track,
.scrollCarousel .slick-slide,
.scrollCarousel .slick-slide > div {
  height: 100%;
}

/* 修改原有.faq样式 */
.faq {
  padding-bottom: 30px;
  overflow-y: auto; /* 仅纵向自动出现滚动条，避免横向多余滚动条 */
  height: 100%; /* 撑满父元素设置的max-height，内容溢出时触发内部滚动 */
  overscroll-behavior: contain; /* 阻止内部滚动穿透到外层Slick轮播，避免滑到底部时误触发轮播切页 */
}

2. 编写正确的滚动触底判断逻辑 #

不要用全等===判断，浏览器渲染时存在亚像素精度偏差，全等很容易判定失效，保留2px容差即可，注意在组件卸载时移除事件监听避免内存泄漏：

// 假设你已经通过useRef拿到了faq元素的引用：const faqRef = useRef(null)
useEffect(() => {
  const faqEl = faqRef.current;
  if (!faqEl) return;

  const handleScrollCheck = () => {
    // clientHeight为元素内部可视区高度，比offsetHeight计算滚动位置更准确
    const isReachBottom = faqEl.scrollTop + faqEl.clientHeight >= faqEl.scrollHeight - 2;
    if (isReachBottom) {
      // 此处写入触底后要执行的业务逻辑
      console.log('已滚动到FAQ模块底部');
    }
  };

  faqEl.addEventListener('scroll', handleScrollCheck);
  return () => faqEl.removeEventListener('scroll', handleScrollCheck);
}, []);

排查提示 #

如果修改后还是拿不到scrollTop，直接打开浏览器开发者工具的Elements面板，选中.faq元素，看右侧Computed面板里的scrollTop值，手动滚动元素内部看数值是否变化，就能快速确认滚动事件是不是绑定在正确的元素上。不要尝试监听window或者外层容器的滚动事件，外层已经被overflow: hidden禁止滚动，监听不会触发。

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