Javascript 滚动有一些问题

我在我的reactJS项目中使用coreUi模板&当一些组件滚动时，我不能平滑滚动，这意味着我可以第一次滚动大约一位，然后再次移动courser位，滚动到页面下方。这只发生在小屏幕上（例如1280px*1024）

这里是我的所有组件处理的地方：

import React, { Component, Suspense, Fragment } from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";
import * as router from "react-router-dom";
import { Container } from "reactstrap";
import { logout } from "../../actions/authActions";
import { ToastContainer } from "react-toastify";

import "react-toastify/dist/ReactToastify.css";

import {
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav
} from "@coreui/react";
// sidebar nav config
import NavigationBar from "../../menu";
// routes config
import routes from "../../routes";
import { connect } from "react-redux";
import { loading } from "./LoadingComponent";
import ButtonPermission from "../../permission";

const DefaultHeader = React.lazy(() => import("./DefaultHeader"));
const Dashboard = React.lazy(() => import("./../../views/Dashboard/Dashboard"));

class DefaultLayout extends Component {
  constructor() {
    super();
    this.currentNavigation = new NavigationBar().createMenu();
    this.routes = new ButtonPermission().setPermission(routes);
  }

  signOut(e) {
    e.preventDefault();
    this.props.history.push("/login");
    this.props.LOGOUT();
  }

  render() {
    const divProps = Object.assign({}, this.props);
    delete divProps.LOGOUT;
    return (
      <div className="app scroller">
        <AppHeader fixed>
          <Suspense fallback={loading()}>
            <DefaultHeader onLogout={e => this.signOut(e)} />
          </Suspense>
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
              <AppSidebarNav
                navConfig={this.currentNavigation}
                {...divProps}
                router={router}
              />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={this.routes} router={router} />
            <Container fluid>
              <Suspense fallback={loading()}>
                {this.routes.map((route, idx) => {
                  return route.component ? (
                    <Route
                      key={idx}
                      path={route.path}
                      exact={route.exact}
                      name={route.name}
                      render={props => (
                        <route.component {...props} {...route.props} />
                      )}
                    />
                  ) : (
                    <Fragment>
                      <Router
                        path="*"
                        name="home"
                        render={props => <Dashboard {...props} />}
                      />
                    </Fragment>

                    ////

                    ////
                  );
                })}
              </Suspense>
              <ToastContainer
                autoClose={3000}
                hideProgressBar
                closeOnClick
                pauseOnHover={false}
                position="bottom-center"
              />
            </Container>
          </main>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  error: state.error
});

const mapDispachToProps = dispach => {
  return {
    LOGOUT: () => dispach(logout())
  };
};

export default connect(mapStateToProps, mapDispachToProps)(DefaultLayout);

import React，{Component，suspent，Fragment}来自“React”；
从“react Router dom”导入{Route，BrowserRouter as Router}；
从“react router dom”导入*作为路由器；
从“reactstrap”导入{Container}；
从“../../actions/authActions”导入{logout}；
从“react toastify”导入{toastcainer}；
导入“react-toastify/dist/react-toastify.css”；
进口{
AppHeader，
AppSidebar，
AppSidebarFooter，
AppSidebarForm，
AppSidebarHeader，
AppSidebarMinimizer，
AppBreadcrumb2作为AppBreadcrumb，
AppSidebarNav2作为AppSidebarNav
}来自“@coreui/react”；
//侧栏导航配置
从“../../menu”导入导航栏；
//路由配置
从“../../routes”导入路由；
从“react redux”导入{connect}；
从“/LoadingComponent”导入{loading}；
从“../../permission”导入按钮权限；
const DefaultHeader=React.lazy（（）=>import（“./DefaultHeader”）；
const Dashboard=React.lazy（（）=>import（“../../../views/Dashboard/Dashboard”）；
类DefaultLayout扩展组件{
构造函数（）{
超级（）；
this.currentNavigation=new NavigationBar（）.createMenu（）；
this.routes=new ButtonPermission（）.setPermission（路由）；
}
签到（e）{
e、 预防默认值（）；
this.props.history.push（“/login”）；
this.props.LOGOUT（）；
}
render（）{
const divProps=Object.assign（{}，this.props）；
删除divProps.LOGOUT；
返回(
这个。签出（e）}/>
{this.routes.map（（route，idx）=>{
返回路线。组件(
(
)}
/>
) : (
}
/>
////
////
);
})}
);
}
}
常量mapStateToProps=状态=>({
错误：state.error
});
常量mapDispachToProps=dispach=>{
返回{
注销：（）=>dispach（注销（））
};
};
导出默认连接（MapStateTops、mapDispachToProps）（DefaultLayout）；

我能在我的reactJS项目中获得更平滑的滚动吗！谢谢大家!