来自白痴的反应光滑的滚动条不起作用

我正在尝试在我的React项目中使用此滚动条：

https://github.com/idiotwu/reeact-smooth-scrollbar

但是，当我将模块安装到我的React项目中时，我尝试按照说明进行尝试，什么也不会发生。我仍然得到常规的卷轴。我在控制台上没有任何错误/警告。

这是我的软件包。JSON文件

{
  "name": "johnproject",
  "version": "1.0.0",
  "main": "src/Main.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-plugin-transform-decorators": "^6.6.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "es6-promise": "^4.0.5",
    "jquery": "^2.2.3",
    "jquery-mousewheel": "^3.1.13",
    "react": "^0.14.7",
    "react-addons-css-transition-group": "^15.3.2",
    "react-bootstrap-modal": "^3.0.0",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "react-smooth-scrollbar": "^7.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "clean-webpack-plugin": "^0.1.8",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.10.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13"
  },
  "description": ""
}

这是我的webpack.config.js

var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: {app:'./src/Main.js'},
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].[hash].bundle.js',
  path: 'build',
    publicPath: '/smoothscroll/build/'
  },
  plugins: [
    /*
        // This plugin minifies all the Javascript code of the final bundle
        new webpack.optimize.UglifyJsPlugin({
            mangle:   true,
            compress: {
                warnings: false, // Suppress uglification warnings
            },
        }),
    */
        new webpack.optimize.CommonsChunkPlugin({
            name:      'main', // Move dependencies to our main file
            children:  true, // Look for common dependencies in all children,
            minChunks: 2, // How many times a dependency must come up before being extracted
        })
  ],
  module: {
    loaders: [
      { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      { test: /.scss$/, loaders: [ 'style', 'css', 'sass' ]},
      { test: /.(jpg|gif|png|eot|woff|svg|ttf)(?.*)?$/, loader: "file-loader" }
    ]
  }

这是我的index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>My Web</title>
  <meta charset="utf-8"/>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/smoothscroll/node_modules/smooth-scrollbar/dist/smooth-scrollbar.css">
</head>
<body>
<div id="app"></div>
<script src="/smoothscroll/build/app.bundle.js"></script>
</body>
</html>

这是我的src/main.js

import React from 'react'
import { render } from 'react-dom'
import ReactDOM from 'react-dom'
import Scrollbar from 'react-smooth-scrollbar';

class App extends React.Component {
    render() {
        return (
      <Scrollbar
        speed={100}
        damping={0.1}
        overscrollDamping={0.2}
        thumbMinSize={20}
        renderByPixels={true}
        continuousScrolling={true}>
        <ol>
          <li>Item</li>
          <li>Item</li>
          <li>add int 100 more rows of these</li>
        </ol>
      </Scrollbar>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

我在做什么错？

更多说明为了重现我的问题，只需在一个称为SmoothScroll的文件夹中创建上面的四个文件，以便在http://whatever.com/smoothscroll上可见该项目。然后运行npm install。然后运行webpack。然后访问http://whatever.com/smoothscroll，以查看该站点仍然使用本机滚动条。

这是我的项目版本：

https://github.com/johnlai2004/reeact-smooth-scrollbar

要使区域可滚动，容器应小于内容。因此解决方案是：

ol { height: 500px }

相关内容

最新更新

热门标签：