使用 React-Bootstrap 中的按钮水平滚动列表项

Question

我正在尝试使用 react 和 react-boostrap 制作水平列表菜单。但是随着列表的长度变得大于容器，列表就会出来。我在那里使用 overlow-Y 作为滚动条，但我想要有 2 个按钮，通过它我可以滚动列表。我如何在 React 中做到这一点？我想要图片中的结果。

...

import React, { useState } from "react";

import Jumbotron from "react-bootstrap/Jumbotron";
import ListGroup from "react-bootstrap/ListGroup";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";

import "./App.css";

const App = () => {
  const [data, useData] = useState([
    { list: "appelllll" },
    { list: "ballllslsss" },
    { list: "cattsssssss" },
    { list: "dogssssss" },
    { list: "eggssss" },
    { list: "fatssssssssssssssssssss" },
    { list: "goatssssssssssssssss" },
    { list: "heloooooooooooooooooo" },
    { list: "ieloooooooooooooo" },
    { list: "jelooooooooo" },
    { list: "kelooooooo" },
    { list: "leooo" },
    { list: "melosdsadsado" }
  ]);

  return (
    <Container className="p-3">
      <ListGroup
        className="list_menu"
        horizontal
        style={{
          overflowX: "scroll"
        }}
      >
        <button>+</button>
        {data.map((data, i) => {
          return (
            <div>
              <ListGroup.Item
                className="list_item"
                key={i}
                onClick={() => console.log(data.list)}
              >
                {data.list}
              </ListGroup.Item>
            </div>
          );
        })}
        <button> > </button>
      </ListGroup>
    </Container>
  );
};

export default App;

...

我的工作演示是 https://codesandbox.io/s/vigorous-rgb-koiwf?file=/src/App.js

Answer 1

因为你设置

.list_menu::-webkit-scrollbar {
  width: 0;
}

所以删除 .list_menu::-webkit-scrollbar 中的 width: 0; 或删除 className="list_menu" 会起作用

<ListGroup
  className="list_menu"
  horizontal
  style={{
    overflowX: "scroll"
    }}
>