{"id":13436680,"url":"https://github.com/souhe/reactScrollbar","last_synced_at":"2025-03-18T21:30:52.916Z","repository":{"id":30136706,"uuid":"33686777","full_name":"souhe/reactScrollbar","owner":"souhe","description":"Scrollbar component for React","archived":false,"fork":false,"pushed_at":"2020-03-31T15:45:00.000Z","size":5985,"stargazers_count":468,"open_issues_count":62,"forks_count":137,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-17T10:43:02.625Z","etag":null,"topics":["react","scrollbar"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/souhe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-09T18:57:15.000Z","updated_at":"2024-04-03T16:18:40.000Z","dependencies_parsed_at":"2022-08-17T20:35:31.760Z","dependency_job_id":null,"html_url":"https://github.com/souhe/reactScrollbar","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souhe%2FreactScrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souhe%2FreactScrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souhe%2FreactScrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souhe%2FreactScrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/souhe","download_url":"https://codeload.github.com/souhe/reactScrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244227587,"owners_count":20419264,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","scrollbar"],"created_at":"2024-07-31T03:00:51.215Z","updated_at":"2025-03-18T21:30:50.261Z","avatar_url":"https://github.com/souhe.png","language":"JavaScript","readme":"\n[![build status](https://img.shields.io/travis/souhe/reactScrollbar/master.svg?style=flat-square)](https://travis-ci.org/souhe/reactScrollbar)\n[![npm package](https://img.shields.io/npm/v/react-scrollbar.svg?style=flat-square)](https://www.npmjs.org/package/react-scrollbar)\n[![npm downloads](https://img.shields.io/npm/dm/react-scrollbar.svg?style=flat-square)](https://www.npmjs.org/package/react-scrollbar)\n# react-scrollbar\n\nSimple ScrollArea component built for [React](http://facebook.github.io/react/).\n\n[Demo](http://souhe.github.io/reactScrollbar)\n\n```bash\nnpm install react-scrollbar --save\n```\n\nReact Scrollbar requires **React 0.13 or later**\n\nFeatures:\n - built with and for `React`\n - horizontal and vertical scrollbars\n - touch support\n - scrollbar dragging and clicking\n - smooth scrolling\n - universal app support\n - customizable styles\n - and more...\n\n## Usage examples\n\n#### React 0.14\n```js\n    var React = require('react');\n    var ReactDOM = require('react-dom');\n    var ScrollArea = require('react-scrollbar');\n\n    var App = React.createClass({\n      render() {\n        return (\n          \u003cScrollArea\n            speed={0.8}\n            className=\"area\"\n            contentClassName=\"content\"\n            horizontal={false}\n            \u003e\n            \u003cdiv\u003eSome long content.\u003c/div\u003e\n          \u003c/ScrollArea\u003e\n        );\n      }\n    });\n\n    ReactDOM.render(\u003cApp/\u003e, document.body);\n```\n\n#### React 0.13\nFor **React 0.13** you need to wrap `\u003cScrollArea\u003e` child into a function.\n```js\n\u003cScrollArea\u003e\n    { () =\u003e \u003cdiv\u003eSome long content. \u003c/div\u003e }\n\u003c/ScrollArea\u003e\n```\n\n#### Version without boundled css styles ####\nIf you prefer including scrollbar without css styles boundled inline to js file it's possible to import package without them. It's useful when you want to make custom css changes in scrollbars without using `!important` in each line. \n\n```js\n    var ScrollArea = require('react-scrollbar/no-css');\n```\nThen **include scrollArea.css** file into your project.\n\n\n### Run the example app\n\n```bash\ngit clone https://github.com/souhe/reactScrollbar.git\ncd reactScrollbar\nnpm install\ngulp build-examples\ngulp less-examples\ngulp watch\n```\n\nthen open [http://localhost:8003](http://localhost:8003).\n\n### Using in universal app\n`ScrollArea` component has now full universal app support. It's only one requirement: you have to use `react-scrollbar` in no-css version and then include css file into your project manually (see [this](#version-without-boundled-css-styles)). It's because of issue in webpack style-loader which is used to bundle css styles into main js file.\n\n## API\n\n### Props\n\n```js\n    \u003cScrollArea\n        speed={Number}\n        className={String}\n        style={Object}\n        contentClassName={String}\n        contentStyle={Object}\n        horizontal={Boolean}\n        horizontalContainerStyle={Object}\n        horizontalScrollbarStyle={Object}\n        vertical={Boolean}\n        verticalContainerStyle={Object}\n        verticalScrollbarStyle={Object}\n        onScroll={(value) =\u003e {}}\n        contentWindow={Object}\n        ownerDocument={Object}\n        smoothScrolling={Boolean}\n        minScrollSize={Number}\n        swapWheelAxes={Boolean}\n        stopScrollPropagation={Boolean}\n        focusableTabIndex={Number}\n    \u003e\n```\n\n#### speed\nScroll speed applied to mouse wheel event.\n**Default: 1**\n\n#### onScroll\n`onScroll(value: Object)` event which can notify the parent component when the container scrolls.\n- `value: Object` - informations about current position\n - `value.leftPosition: Number` - content left position (distance in pixels from the left side of container)\n - `value.topPosition: Number` - content top position (distance in pixels from the top of container)\n - `value.containerHeight: Number` - container height\n - `value.containerWidth: Number` - container width\n - `value.realHeight: Number` - real content height\n - `value.realWidth: Number` - real content width\n\n#### className\nCSS class names added to main scroll area component.\n\n#### style\nInline styles applied to the main scroll area component.\n\n#### contentClassName\nCSS class names added to element with scroll area content.\n\n#### contentStyle\nInline styles applied to element with scroll area content.\n\n#### horizontal\nWhen set to false, horizontal scrollbar will not be available.\n**Default: true**\n\n#### horizontalContainerStyle\nInline styles applied to horizontal scrollbar's container.\n\n#### horizontalScrollbarStyle\nInline styles applied to horizontal scrollbar.\n\n#### vertical\nWhen set to false, vertical scrollbar will not be available, regardless of the content height.\n**Default: true**\n\n#### verticalContainerStyle\nInline styles applied to vertical scrollbar's container.\n\n#### verticalScrollbarStyle\nInline styles applied to vertical scrollbar.\n\n#### contentWindow\nYou can override window to make scrollarea works inside iframe.\n**Default: window**\n\n#### ownerDocument\nYou can override document to make scrollarea works inside iframe.\n**Default: document**\n\n#### smoothScrolling\nWhen set to true, smooth scrolling for both scrollbars is enabled. \n**Default: false**\n\n#### minScrollSize\nUsing this prop it's possible to set minimal size in px for both scrollbars.\n\n#### swapWheelAxes\nAfter set to true, mouse wheel event has swapped directions. So normal scrolling moves horizontal scrollbar and scrolling with SHIFT key moves vertical scrollbar. It could be useful for applications with horizontal layout.\n**Default: false**\n\n#### stopScrollPropagation\nAfter set to true, mouse wheel event will not propagate. This option is specifically useful in preventing nested scroll areas from propagating scroll actions to parent scroll areas.\n**Default: false**\n\n#### focusableTabIndex\nAfter set to a number, scrollarea-content is rendered with a tabindex value set to the passed in. This option is specifically useful in allowing the scroll area to be focusable.\n**Default: undefined**\n\n\n### Context\nIn context of each `\u003cScrollArea\u003e` child could be injected an object `scrollArea` contains method:\n\n#### `refresh()`\nThat method allows manual refreshing of the scrollbar.\n\nReact 0.14 example using ES6 syntax:\n```js\nclass App extends React.Component {\n    render(){\n        return (\n            \u003cScrollArea\u003e\n                \u003cContent /\u003e\n            \u003c/ScrollArea\u003e\n        );\n    }\n}\n\nclass Content extends React.Component {\n    render(){\n        return (\n            \u003cdiv onClick={this.handleSomeAction.bind(this)}\u003e Some long content \u003c/div\u003e\n        );\n    }\n\n    handleSomeAction(){\n        this.context.scrollArea.refresh();\n    }\n}\n\nContent.contextTypes = {\n    scrollArea: React.PropTypes.object\n};\n```\n\n#### `scrollTop()`\nIt allows to scroll to the top of `ScrollArea` component.\n\n#### `scrollBottom()`\nIt allows to scroll to the bottom of `ScrollArea` component.\n\n#### `scrollYTo(topPosition)`\nIt moves vertical scrollbar. `topPosition` is a distance between the top of `scrollArea` container and the top of `scrollArea` content.  \n\n#### `scrollLeft()`\nIt allows to scroll to the left of `ScrollArea` component.\n\n#### `scrollRight()`\nIt allows to scroll to the right of `ScrollArea` component.\n\n#### `scrollXTo(leftPosition)`\nIt moves horizontal scrollbar. `leftPosition` is a distance between left edge of `scrollArea` container and left edge of `scrollArea` content.  \n\n# Change log\nEvery release is documented on the Github [Releases](https://github.com/souhe/reactScrollbar/releases) page. \n\n# License\nMIT\n","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Custom Scrollbar"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouhe%2FreactScrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouhe%2FreactScrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouhe%2FreactScrollbar/lists"}