如何在div上应用滚动条？

Question

我试图在div中的项目旁边显示滚动条，但做不到。这是我的密码。

{reciters && reciters.length > 0 ? (
        reciters.map((reciter) => (
          <div style={{ cursor: "pointer" }}>
            <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> <br />
            </div>
            <hr />
          </div>
        ))
      ) : (
        <div className="text-center">
          <span className="spinner-border"></span>
        </div>
      )}

我尝试在div中添加style={{overflowY：“滚动”}}，但是它显示了针对每个项的滚动条，我希望为div中的每个项都设置一个单滚动条。如下所示：

<div style={{ cursor: "pointer", overflowY: "scroll" }}>
            <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> <br />
            </div>
            <hr />
          </div>
        ))
      ) : (
        <div className="text-center">
          <span className="spinner-border"></span>
        </div>

​

​

Answer 1

您需要将overflow-y: auto应用于包含的div，以便执行如下操作：

<div style={{overflowY: auto; height: '200px'}} >
  {reciters.map((reciter) => (
    <div style={{ cursor: "pointer" }}>
      <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> <br />
      </div>
      <hr />
    </div>
  }
</div>

我添加了height: '200px'，以确保包含的div不只是为了容纳在其中映射的项而增长。