I'm trying to use this scrollbar in my react project:
https://github.com/idiotWu/react-smooth-scrollbar
But when I install the module into my react project and I tried following the instructions, nothing happens. I still get the regular scrollbar. I don't get any errors/warnings in the console.
Here's my package.json file
{
"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": ""
}
Here's my 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" }
]
}
Here's my 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>
And here's my 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'));
What am I doing wrong?
MORE INSTRUCTIONS
To reproduce my issue, simply create the four files above within a folder called smoothscroll such that the project will be visible at http://whatever.com/smoothscroll . Then run npm install. Then run webpack. Then visit the http://whatever.com/smoothscroll to see that the site still uses native scrollbar.
Here's my version of the project:
To make an area scrollable, the container should be smaller than the contents. So the solution is: