如何为包含列表项的div添加全局垂直滚动条？

你之前的问题是把滚动条样式加在了每个列表项的容器上，导致每个项单独出现滚动条。要实现整个列表共用一个滚动条，需要把滚动样式加到包裹所有列表项的外层容器上，同时给这个外层容器设置固定高度（否则容器会随内容自动撑开，不会触发滚动）。

修改后的完整代码 #

{reciters && reciters.length > 0 ? (
  // 外层容器：添加滚动样式和固定高度
  <div style={{ maxHeight: "80vh", overflowY: "auto" }}>
    {reciters.map((reciter) => (
      <div style={{ cursor: "pointer" }} key={reciter.id}>
        <div
          onClick={(e) => {
            reciterHandler(reciter);
            setActiveId(reciter.id);
          }}
          className={`d-flex align-items-center py-0 curser ${
            reciter.id === activeId && "active"
          }`}
        >
          <FaUserCircle className="fs-3" />
          <span className="ps-3">{reciter.name}</span>
        </div>
        <hr />
      </div>
    ))}
  </div>
) : (
  <div className="text-center">
    <span className="spinner-border"></span>
  </div>
)}

关键说明 #

• 外层容器设置高度：用maxHeight: "80vh"让容器最多占视口80%高度，也可以用固定值比如height: "400px"，根据你的布局需求调整。
• 滚动样式用auto：overflowY: "auto"会在内容超出容器高度时才显示滚动条，比强制显示的scroll更美观。
• 添加key属性：map循环的元素要加唯一key（这里用reciter.id），符合React的性能优化要求。

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