docs;

Author: xobotyi

README.md

@@ -17,7 +17,7 @@
 * Native scrollbars on mobile devices
 
 >**IMPORTANT:** default component styles uses [grid layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) for proper scrollbars display.  
->But you can change it with help of [customisation](https://github.com/xobotyi/react-scrollbars-custom/tree/master/docs/CUSTOMISATION.md). 
+>But you can change it by passing `gridless` parameter on initialisation. 
 
 ## Installation
 ```bash

docs/API.md

@@ -3,12 +3,16 @@
 ### `<Scrollbar>`
 #### Properties
 * **Setups**
+    * `gridless`: _(boolean)_ Forces to use non-grid styles _(default: false)_
     * `defaultStyles`: _(boolean)_ Apply default inline styles _(default: false)_
     * `thumbSizeMin`: _(number)_ Minimal size of thumb in pixels _(default: 30)_
-    * `scrollDetectionThreshold`: _(number)_ Scroll process check interval in milliseconds _(default: 100)_
+    * `noScroll`: _(boolean)_ Disable both scrollings, vertical and horizontal _(default: false)_
+    * `scrollY`: _(boolean)_ If false, vertical scrolling will be disabled _(default: true)_
+    * `scrollX`: _(boolean)_ If false, horizontal scrolling will be disabled _(default: true)_
     * `permanentScrollbars`: _(boolean)_ Display both, vertical and horizontal scrollbars permanently, in spite of scrolling possibility _(default: false)_
     * `permanentScrollbarVertical`: _(boolean)_ Display vertical scrollbar permanently, in spite of scrolling possibility  _(default: false)_
     * `permanentScrollbarHorizontal`: _(boolean)_ Display horizontal scrollbar permanently, in spite of scrolling possibility  _(default: false)_
+    * `scrollDetectionThreshold`: _(number)_ Scroll process check interval in milliseconds _(default: 100)_
     * `contentSizeTrack`: _(boolean)_ Automatically check content's sizes to actualize the scrollbars. Useful when dom is changed not only by react. _(default: false)_
     * `contentSizeTrackInterval`: _(number)_ Interval between content's size check, in milliseconds _(default: 200)_
 * **Rendering**
@@ -29,8 +33,8 @@ All of these event handlers will be called inside the animation frame
             * `values.scrollLeft`: _(number)_ Native scrollLeft
             * `values.scrollHeight`: _(number)_ Native scrollHeight
             * `values.scrollWidth`: _(number)_ Native scrollWidth
-            * `values.clientWidth`: _(number)_ Native clientWidth 
-            * `values.clientHeight`: _(number)_ Native clientHeight 
+            * `values.clientWidth`: _(number)_ Native clientWidth
+            * `values.clientHeight`: _(number)_ Native clientHeight
     * `onUpdate (values)`: _(function)_ Called when the component is updated
         * `values`: _(object)_ Values representing scrolling position for the scroll start moment
     * `onScrollStart (values)`: _(function)_ Called when scrolling has started
@@ -51,4 +55,4 @@ All of these event handlers will be called inside the animation frame
 * `scrollToLeft()`: _(Scrollbar)_ Scroll to the left border
 * `scrollToRight()`: _(Scrollbar)_ Scroll to the right border
 * `update()`: _(Scrollbar)_ Updates the scrollbars. Useful when external, non-react libraries are changing scrollable content
-* `getScrollValues()`: _(object)_ Get values representing current scrolling position
+* `getScrollValues()`: _(object)_ Get values representing current scrolling position

docs/USAGE.md

@@ -34,8 +34,12 @@ Component creates next structure:
 </div>
 ```
 
+### Scroll disabling
+The most common need is to disable scrolling fully or partially. You can do it simply adding `noScroll` to disable all scrolls and `scrollY={false}`/`scrollX={false}` to disable scrolls separately.  
+Note, that if `scrollY={false}` and `scrollX={false}` will be set simultaneously, it will be treated like `noScroll={true}`.
+
 ### Default styles
-To customize scrollbars as you wish - you can turn off default styles.
+To customize scrollbars as you wish - you may want to turn off default styles.
 ```javascript
 import React, { Component }  from 'react';
 import Scrollbar from 'react-scrollbar-custom';
@@ -85,8 +89,8 @@ class App extends Component
 }
 ```
 
-### Automatic size checks
-It is possible that DOM will be changed not only with React: for these cases `<Scrollbar />` has automatic content checker.
+### Automatic size tracking
+It is possible that DOM will be changed not only with React: for these cases `<Scrollbar />` has automatic content tracker.
 ```javascript
 import React, { Component }  from 'react';
 import Scrollbar from 'react-scrollbar-custom';
@@ -100,4 +104,4 @@ class App extends Component
     }
 }
 ```
-Now `<Scrollbar/>` will check content's sizes every 500ms and trigger `Scrollbar.update()` if they're changed.
+Now `<Scrollbar/>` will check content's sizes every 500ms and trigger `Scrollbar.update()` if they're changed.

examples/components/AutohideScrollbars/App.js

@@ -120,6 +120,7 @@ body {
 
 .scrollers .scroller > .description {
     display:       block;
+    position: relative;
     width:         100%;
     margin:        0 0 1.5rem;
     padding:       0 0 1rem;
@@ -246,4 +247,4 @@ body {
 #sandboxScrollbarsRoot .CustomScrollbar-thumbVertical:hover, #sandboxScrollbarsRoot .CustomScrollbar-thumbVertical.dragging {
     width: calc(100% + 2px);
     left:  -1px;
-}
+}

examples/components/DefaultStyleScrollbars/App.js

@@ -53,7 +53,10 @@ export const holderGridless = {
     display:  'block',
     position: 'relative',
 };
-export const wrapperGridless = {};
+export const wrapperGridless = {
+    display:   'block',
+    minHeight: '100%',
+};
 export const trackVerticalGridless = {
     background: 'rgba(0,0,0,.1)',
     position:   'absolute',

examples/static/style.css

@@ -664,8 +664,6 @@ export default class Scrollbar extends Component
             trackHorizontalStyle.display = 'none';
         }
 
-        console.log(contentStyle);
-
         if ((permanentScrollbars || permanentScrollbarVertical)) {
             trackVerticalStyle.display = null;