0
私は私のプロジェクトに反応して、このスクロールバーを使用しようとしている：idiotWuの円滑なスクロールバーが反応しませんか？
https://github.com/idiotWu/react-smooth-scrollbar
しかし、私は、プロジェクトを反応させて、私は指示に従ってしようとしたに私は、モジュールをインストールするとき、何も起こりません。私はまだ通常のスクロールバーを取得します。コンソールにエラーや警告が表示されません。
はここにここに私の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ですだ私のpackage.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": ""
}
だ
<!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 /メインです。 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'));
私は間違っていますか？
詳細な説明 問題を再現するには、上記の4つのファイルをsmoothscrollというフォルダ内に作成して、プロジェクトをhttp://whatever.com/smoothscrollに表示します。次にnpm installを実行します。次にwebpackを実行します。次に、http://whatever.com/smoothscrollにアクセスして、サイトがまだネイティブのスクロールバーを使用していることを確認します。ここで
は、プロジェクトの私のバージョンです：
https://github.com/johnlai2004/react-smooth-scrollbar
NOTE - 私はあなたが問題 – John
の適切な反応バージョンへのリンクを更新し、ここにある - https：//でgithub.com/johnlai2004/react-smooth-scrollbar – Kafo
こんにちはフセインとの迅速なレポを作成することができ、滑らかなスクロールバー – John