réagir lisse barre de défilement de idiotWu ne fonctionne pas?

Je suis en train d'utiliser cette barre de défilement dans mon projet REACT:réagir lisse barre de défilement de idiotWu ne fonctionne pas?

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

Mais quand j'installer le module dans mon projet REACT et j'ai essayé en suivant les instructions, rien ne se passe. Je reçois toujours la barre de défilement régulière. Je ne reçois aucune erreur/avertissement dans la console.

Voici mon fichier 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": "" 
}

Voici mes 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" } 
    ] 
    }

Voici mon 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>

Et voici ma 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'));

Qu'est-ce que je fais mal?

PLUS D'INSTRUCTIONS Pour reproduire mon problème, il suffit de créer les quatre fichiers ci-dessus dans un dossier nommé smoothscroll afin que le projet soit visible à http://whatever.com/smoothscroll. Ensuite, exécutez npm install. Ensuite, exécutez webpack. Ensuite, visitez le http://whatever.com/smoothscroll pour voir que le site utilise toujours la barre de défilement native.

Voilà ma version du projet:

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

Source

2016-12-24 John

NOTE - i mis à jour le lien vers la version appropriée de réagir lisse scrollbar – John

Pouvez-vous créer un repo rapide avec le problème – Kafo

Salut Hussein, ici il est - https: // github.com/johnlai2004/react-smooth-scrollbar – John

Pour faire une zone défilante, le contenant doit être plus petit que le contenu. La solution est donc:

ol { height: 500px }

Source

2016-12-25 10:14:55

réagir lisse barre de défilement de idiotWu ne fonctionne pas?

Répondre

Questions connexes