反应从idiotWu平滑滚动条不起作用？

https://github.com/idiotWu/react-smooth-scrollbar

但是，当我安装模块到我反应过来的项目，我试图按照指示，没有任何反应。我仍然得到普通的滚动条。我在控制台中没有收到任何错误/警告。

这是我的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": "" 
}

这里是我的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/react-smooth-scrollbar

来源

2016-12-24 John

注 - 我的链接更新为平滑滚动 – John

的正确反应的版本，你可以创建一个快捷回购的问题 – Kafo

侯赛因嗨，这里是 - https：//开头github.com/johnlai2004/react-smooth-scrollbar – John

要使一个区域滚动，容器应大于内容更小。因此，解决办法是：

ol { height: 500px }

来源

2016-12-25 10:14:55

反应从idiotWu平滑滚动条不起作用？

回答

相关问题