React Vertical Timeline不显示，元素被is-hidden类隐藏问题

我在项目中实现React Vertical Timeline组件，但生成的HTML里组件并未显示。通过浏览器检查发现元素被自动加上了is-hidden类，推测问题与Intersection Observer相关。

相关代码 #

timeline.js 文件 #

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { timelineData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";

export default function Experience() {
  const { ref } = useSectionInView("Timeline");

  return (
    <section
      id="timeline"
      ref={ref}
      className="scroll-mt-28 mb-28 sm:mb-40 text-center"
    >
      <SectionHeading>Timeline</SectionHeading>
      <VerticalTimeline lineColor="">
        {timelineData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              contentStyle={{
                background: "rgba(255, 0, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 230, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background: "rgba(255, 255, 255, 0.15)",
                fontSize: "1.5rem",
              }}
            >
              <h3 className="font-semibold capitalize">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </section>
  );
}

data.js 文件 #

{
    index_number: 1,
    title: "学士学位",
    location: "孟加拉国",
    description:
      "我在孟加拉国美国国际大学完成了计算机科学与软件工程学士学位。",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "1994年9月2日",
    icon: <BiSolidGraduation />,
  },
  {
    index_number: 1,
    title: "学士学位",
    location: "孟加拉国",
    description:
      "我在孟加拉国美国国际大学完成了计算机科学与软件工程学士学位。",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "2021年9月11日",
    icon: <BiSolidGraduation />,
  },

解决思路与方案 #

1. 强制元素可见，跳过组件自带的Intersection Observer #

react-vertical-timeline-component默认会通过Intersection Observer给未进入视口的元素添加is-hidden类。如果不需要这个默认逻辑，直接给VerticalTimelineElement添加visible={true}属性强制显示：

<VerticalTimelineElement
  visible={true} // 强制元素可见，忽略组件自带的视口检测
  // 其他原有属性保持不变
>
  {/* 内容 */}
</VerticalTimelineElement>

2. 补充Intersection Observer兼容补丁 #

部分旧浏览器不支持Intersection Observer，会导致组件默认隐藏元素。可以安装并导入polyfill：

npm install intersection-observer

在项目入口文件（如_app.js或main.jsx）中添加：

import 'intersection-observer';

3. 排查自定义hook的冲突 #

你使用的useSectionInView自定义hook可能也在使用Intersection Observer，和组件自带逻辑冲突。暂时移除该hook的ref绑定测试：

// 注释掉ref相关代码
// const { ref } = useSectionInView("Timeline");

return (
  <section
    id="timeline"
    // ref={ref}
    className="scroll-mt-28 mb-28 sm:mb-40 text-center"
  >
    {/* 内容 */}
  </section>
);

如果移除后组件正常显示，说明两个Intersection Observer逻辑冲突，需要调整useSectionInView的实现，或改用组件自带的显隐控制逻辑。

4. 检查全局CSS的样式覆盖 #

避免全局样式意外修改.is-hidden类的默认行为，比如：

/* 禁止这类全局样式 */
.is-hidden {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者Tanvir Hasan Hridoy