Question

所以我是React的新手，正在尝试向应用程序添加滚动条。我已经安装了react-perfect-scrollbar并将其导入到我的应用程序中。按照指定的说明进行操作后，我无法显示滚动条...我想我犯了一个非常基本的错误，但无法解决。我还没有摆弄自定义选项或其他任何东西，我只是在尝试显示滚动条

/usr/local/go/bin

Answer 1

您是否尝试过将商品放入DIV中？

import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

<PerfectScrollbar>
<div>
   <p> test 1 </p>
   <p> test 2 </p>
</div>
</PerfectScrollbar>

Answer 2

您没有为要显示的滚动条提供正确的CSS。工作codesandbox code here

Example.js

import React, { Component } from "react";
import ScrollBar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";

import "./example.scss";

class Example extends Component {
  render() {
    return (
      <div className="example">
        <ScrollBar component="div">
          <div className="content" />
        </ScrollBar>
      </div>
    );
  }
}

export default Example;

example.scss

.example {
  width: 400px;
  height: 400px;

  .content {
    background: green;
    width: 800px;
    height: 480px;
  }
}

希望有帮助！

试图让React-Perfect-scrollbar在React应用中正常工作

2 个答案: