├── .babelrc ├── .gitignore ├── LICENSE.txt ├── README.md ├── package.json ├── src ├── demo │ ├── bg.jpg │ ├── index.html │ ├── index.js │ └── index.less └── main │ ├── GenericScrollBox.js │ ├── ScrollBox.js │ ├── index.js │ └── index.less ├── webpack.config.js └── webpack.demo.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Paths 2 | node/ 3 | node_modules/ 4 | target/ 5 | typings/ 6 | npm-debug.log 7 | 8 | # IDE 9 | .idea/ 10 | *.iml 11 | *.bak 12 | *.tmp 13 | *.log 14 | *.swp 15 | 16 | # OS 17 | .DS_Store 18 | .AppleDouble 19 | .LSOverride 20 | ._* 21 | .Spotlight-V100 22 | $RECYCLE.BIN/ 23 | .Trashes 24 | *.lnk 25 | Thumbs.db 26 | ehthumbs.db 27 | Desktop.ini 28 | 29 | # Remote AFP 30 | .AppleDB 31 | .AppleDesktop 32 | Network Trash Folder 33 | Temporary Items 34 | .apdisk 35 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2016 Savva Mikhalevski 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Scroll Box 2 | 3 | [![npm version](https://badge.fury.io/js/react-scroll-box.svg)](https://www.npmjs.com/package/react-scroll-box) 4 | 5 | _Note_ I'm currently working on `resct-scroll-box@0.3`. It would contain [50+ configurable paramters](https://github.com/smikhalevski/react-scroll-box/blob/master/src/main/GenericScrollBox.js#L32) and would provide fine grained tracking of scrolling events and [their causes](https://github.com/smikhalevski/react-scroll-box/blob/master/src/main/GenericScrollBox.js#L15). 6 | 7 | Charged cross-browser and cross-platform scrollable container implementation with no external dependencies but React 0.13+. 8 | 9 | Requires [`classList` polyfill](https://www.npmjs.com/package/classlist-polyfill) to work properly in IE9+. 10 | 11 | Tested in FF, Chrome, Safari, iOS Safari, Opera and IE9+. 12 | 13 | Any help with improvement of this component would be greatly appreciated. 14 | 15 | [**API Playground and Live Demo**](http://smikhalevski.github.io/react-scroll-box/) 16 | 17 | ## Contents 18 | 19 | 1. [Motivation](#motivation) 20 | 2. [`ScrollBox`](#scrollbox) 21 | 1. [Attributes](#attributes) 22 | 3. [`GenericScrollBox`](#genericscrollbox) 23 | 1. [Layout](#layout) 24 | 2. [Properties](#properties) 25 | 3. [Methods](#methods) 26 | 4. [License](#license) 27 | 28 | ## Motivation 29 | 30 | - Use custom or native scroll bars. 31 | - Highly customizable tracks and handles for both mobile and desktop. 32 | - Inset and outset scroll bars with ease. 33 | - Optional fallback to native inertial scrolling on mobile devices. 34 | - Animated and smooth scrolling with customizable easing functions. 35 | - Scrollbars detect mouse in close proximity and change their style accordingly for better UX. 36 | - Scrollbars are automatically added, removed and resized when scroll box dimensions are changed. 37 | - Scrolling speed is equalized among browsers. 38 | - Customizable keyboard scrolling support. 39 | - Scroll boxes can be nested. 40 | - Custom viewports can be used. Have a look at [`react-text-input`](https://github.com/smikhalevski/react-text-input) for `textarea` with customizable scrollbars. 41 | - Conditionally unwrap scroll box to scroll its content along with page. This can even be done using a media query. 42 | - Scrollbar size represents ratio of content and viewport sizes and can be constrained from CSS. 43 | - LESS styles with a mixin to simplify coloring. 44 | - Lots of other properties to customize scrolling behavior. 45 | 46 | ## `ScrollBox` 47 | 48 | In most cases you should use `ScrollBox` to create a scrollable area, but in case you need more control over viewport use [`GenericScrollBox`](#genericscrollbox). 49 | 50 | By default, `ScrollBox` has no decoration and behaves as a regular `div` container. Specify height for scroll box in your styles, otherwise container would contract to zero height. 51 | 52 | ```jsx 53 | var ScrollBox = require('react-scroll-box').ScrollBox; // ES5 54 | 55 | import {ScrollBox, ScrollAxes, FastTrack} from 'react-scroll-box'; // ES6 56 | 57 | 58 | Place any content here. 59 | 60 | ``` 61 | 62 | ### Attributes 63 | 64 | #### boolean nativeScroll 65 | Use native scrollbars. By default, this flag is set to `true` on mobile platforms and `false` on desktops. Paltforms are distinguished by presence of `window.orientation`. 66 | 67 | #### [ScrollAxes](#scroll-axes) axes = [ScrollAxes.XY](#scroll-axes-xy) 68 | Scroll axes which are managed by the scroll box. If scroll axis is not listed then corresponding scroll offset would be constantly equal to 0 and any scrolling requests via API or from UI for that axes would be ignored. 69 | 70 | #### integer hoverProximity = 50 71 | Maximum distance in pixels between cursor and scroll track edge when track is considered to be hovered. Useful when you want to have thin scrollbars and increase theit thickness when cursor aproaches them so user don't have to aim precisely. Set to 0 to disable hover proximity detection. 72 | 73 | #### boolean disabled = false 74 | Disable scroll box. 75 | 76 | #### boolean outset = false 77 | Display scrollbars outside of scrollable area. Outset scrllbars don't require additional space and don't affect surrounding layout. On mobile devices when native scrollbars are used this property has no effect because scrollbars have zero width and thus don't crop any space from viewport. 78 | 79 | #### integer scrollMinX = 2 scrollMinY = 2 80 | Minimum difference in pixels in content and viewport sizes to enable scrolling. 81 | 82 | #### boolean captureKeyboard = true 83 | Use keyboard for scrolling when scroll box viewport or its nested content is focused. Keyboard is not captured for `` and `