{"_id":"@aliyun-sls/react-custom-scrollbars","_rev":"13-690c49e20c0b554dfe17b22415a04961","name":"@aliyun-sls/react-custom-scrollbars","dist-tags":{"latest":"4.2.6"},"versions":{"4.2.6":{"name":"@aliyun-sls/react-custom-scrollbars","version":"4.2.6","keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"author":{"name":"Malte Wessel"},"license":"MIT","_id":"@aliyun-sls/react-custom-scrollbars@4.2.6","maintainers":[{"name":"sanjdw","email":"290506494@qq.com"},{"name":"yuecjnadt","email":"yuecjn@gmail.com"},{"name":"perezyuan","email":"yzmspirit@gmail.com"}],"homepage":"https://github.com/wangtao0101/react-custom-scrollbars","bugs":{"url":"https://github.com/wangtao0101/react-custom-scrollbars/issues"},"dist":{"shasum":"26b4666319656bc2177d7ea3c5afb952a1b4ae81","tarball":"https://registry.npmjs.org/@aliyun-sls/react-custom-scrollbars/-/react-custom-scrollbars-4.2.6.tgz","fileCount":32,"integrity":"sha512-rV7SfG5FNnvDAzj2qt4Q1cGbCSD2wn1c2VS7nlkACuV8ToFUZxDrA9pIUq5EATp2ifyGzH8495A0FgwsWMg71A==","signatures":[{"sig":"MEUCIDN5BE/nUsXYPHqBHwn107L7Ssrr3OCZLjHUBtezoAcAAiEAgbq/WP1GEPdFvzsmhubht5MpWMmgeM7dr+Sc1HoNxXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnjRHCRA9TVsSAnZWagAAFHQP/R4HHRh5ZuvV+LMcHL/A\nZVK5MltFRMgBKPhoAXwS24CD7tMDPxBYK8RV9XxaRle22h4RyvjMtqhtugBa\njV4TYd+6+Z4C6a6dezLMhuUPdO8CzyN70hHq63OnwWcQrp9GnDetmE3tBUet\nhUMcWXxkvDIs4PjBr3VBzspNQ6rdix0DrKK26G4HKBsKIGli7uijj9xbkhWF\n+bYSz+1OeD6psx2MKuQGRs0DuX2DZ8PnjkadmdO/YX4mLQJT5HOFLsiSdCDu\n7G+OzIMQ4mnyLhwr+MPdv6KZHPSCLCVIhpyrsoX5WEGEkBhg+I6EG7fWIvL4\nrPUW0nJ7bmsMglDiRphHCFtsgjpVO8lbkJi2LfmS5FzsX9gekGWeOlyKG1Z7\ncbxSIZt517Wr8PZdQerN/wONUmezfGqtixBgk0vDLcefI2f0p9zDn8VkqX+1\nYzFz0K6ob6BdHcBUYZtIiNKAEOFGUTbZJZ5FiY4qlac7iz25xThbtZIjJ40I\nV0fHfhK2eMQKK/eb/6zAHcwZPZpy2TLTL4fljd6w6qvAsAMjW+07ZrNDTADa\nflf52aK2jg5ITR/cfe643we+hN7ZwZ7PtkUDOeOk88DNxqZmTY+VPFfjTOSU\n7V7gUhphlTyLI25BilZVGBgTnpid7Zop8l8DeVYNcQXZ1cibA+YrOsZMo4ll\no7Qs\r\n=uQHn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"index.d.ts","gitHead":"e377aa474b535c3b90351eec442cc08bffa60b51","scripts":{"pub":"npm publish --access public","lint":"eslint src test examples","test":"cross-env NODE_ENV=test karma start","build":"babel src --out-dir lib","clean":"rimraf lib dist","test:cov":"cross-env NODE_ENV=test COVERAGE=true karma start --single-run","build:umd":"cross-env NODE_ENV=development webpack src/index.js dist/react-custom-scrollbars.js","prepublish":"npm run lint && npm run test && npm run clean && npm run build && npm run build:umd && npm run build:umd:min && node ./prepublish","test:watch":"cross-env NODE_ENV=test karma start --auto-watch --no-single-run","build:umd:min":"cross-env NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js"},"_npmUser":{"name":"yuecjnadt","email":"yuecjn@gmail.com"},"repository":{"url":"git+https://github.com/wangtao0101/react-custom-scrollbars.git","type":"git"},"_npmVersion":"6.14.8","description":"React scrollbars component","directories":{},"_nodeVersion":"14.15.0","dependencies":{"raf":"^3.1.0","dom-css":"^2.0.0","prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^7.0.0","karma":"^1.1.1","mocha":"^2.2.5","react":"^16.0.0","es3ify":"^0.2.1","eslint":"^2.9.0","expect":"^1.6.0","rimraf":"^2.3.4","webpack":"^1.9.6","simulant":"^0.2.2","babel-cli":"^6.2.0","cross-env":"^3.1.3","karma-cli":"^1.0.1","react-dom":"^16.0.0","babel-core":"^6.2.1","karma-mocha":"^0.2.0","babel-eslint":"^6.1.2","babel-loader":"^6.2.0","babel-runtime":"^6.3.19","karma-webpack":"^1.6.0","babel-register":"^6.3.13","isparta-loader":"^2.0.0","karma-coverage":"^1.1.0","babel-preset-react":"^6.3.13","webpack-dev-server":"^1.8.2","babel-preset-es2015":"^6.1.18","eslint-plugin-react":"^5.2.2","babel-preset-stage-1":"^6.1.18","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.2","karma-mocha-reporter":"^2.0.4","karma-chrome-launcher":"^1.0.1","eslint-plugin-jsx-a11y":"^1.2.0","karma-sourcemap-loader":"^0.3.6"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0","react-dom":"^0.14.0 || ^15.0.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-custom-scrollbars_4.2.6_1637758023247_0.6078308989486225","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-11-24T12:47:03.203Z","modified":"2025-04-07T06:32:48.822Z","4.2.6":"2021-11-24T12:47:03.430Z"},"bugs":{"url":"https://github.com/wangtao0101/react-custom-scrollbars/issues"},"author":{"name":"Malte Wessel"},"license":"MIT","homepage":"https://github.com/wangtao0101/react-custom-scrollbars","keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"repository":{"url":"git+https://github.com/wangtao0101/react-custom-scrollbars.git","type":"git"},"description":"React scrollbars component","maintainers":[{"email":"yuecjn@gmail.com","name":"yuecjnadt"},{"email":"ruiqi.hy@alibaba-inc.com","name":"ruiqi.hy"},{"email":"1581024375@qq.com","name":"nosmilen"},{"email":"qinghaotu@126.com","name":"7678tqh"}],"readme":"react-custom-scrollbars\n=========================\n\n[![npm](https://img.shields.io/badge/npm-react--custom--scrollbars-brightgreen.svg?style=flat-square)]()\n[![npm version](https://img.shields.io/npm/v/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)\n[![npm downloads](https://img.shields.io/npm/dm/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)\n\n* frictionless native browser scrolling\n* native scrollbars for mobile devices\n* [fully customizable](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md)\n* [auto hide](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-hide)\n* [auto height](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-height)\n* [universal](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#universal-rendering) (runs on client & server)\n* `requestAnimationFrame` for 60fps\n* no extra stylesheets\n* well tested, 100% code coverage\n\n**[Demos](http://malte-wessel.github.io/react-custom-scrollbars/) · [Documentation](https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs)**\n\n## Installation\n```bash\nnpm install react-custom-scrollbars --save\n```\n\nThis assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](http://webpack.github.io) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).\n\nIf you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactCustomScrollbars` available as a global object, you can grab a pre-built version from [unpkg](https://unpkg.com/react-custom-scrollbars@3.0.1/dist/react-custom-scrollbars.js). We *don’t* recommend this approach for any serious application, as most of the libraries complementary to `react-custom-scrollbars` are only available on [npm](http://npmjs.com/).\n\n## Usage\n\nThis is the minimal configuration. [Check out the Documentation for advanced usage](https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs).\n\n```javascript\nimport { Scrollbars } from 'react-custom-scrollbars';\n\nclass App extends Component {\n  render() {\n    return (\n      <Scrollbars style={{ width: 500, height: 300 }}>\n        <p>Some great content...</p>\n      </Scrollbars>\n    );\n  }\n}\n```\n\nThe `<Scrollbars>` component is completely customizable. Check out the following code:\n\n```javascript\nimport { Scrollbars } from 'react-custom-scrollbars';\n\nclass CustomScrollbars extends Component {\n  render() {\n    return (\n      <Scrollbars\n        onScroll={this.handleScroll}\n        onScrollFrame={this.handleScrollFrame}\n        onScrollStart={this.handleScrollStart}\n        onScrollStop={this.handleScrollStop}\n        onUpdate={this.handleUpdate}\n        renderView={this.renderView}\n        renderTrackHorizontal={this.renderTrackHorizontal}\n        renderTrackVertical={this.renderTrackVertical}\n        renderThumbHorizontal={this.renderThumbHorizontal}\n        renderThumbVertical={this.renderThumbVertical}\n        autoHide\n        autoHideTimeout={1000}\n        autoHideDuration={200}\n        autoHeight\n        autoHeightMin={0}\n        autoHeightMax={200}\n        thumbMinSize={30}\n        universal={true}\n        {...this.props}>\n    );\n  }\n}\n```\n\nAll properties are documented in the [API docs](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md)\n\n## Examples\n\nRun the simple example:\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Move to example directory\ncd react-custom-scrollbars/examples/simple\nnpm install\nnpm start\n```\n\n## Tests\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Run tests\nnpm test\n```\n\n### Code Coverage\n```bash\n# Run code coverage. Results can be found in `./coverage`\nnpm run test:cov\n```\n\n\n## License\n\nMIT\n","readmeFilename":"README.md"}