add browser offset option

fuermosi777 · Aug 23, 2017 · b06d248 · b06d248
1 parent 9342a8c
commit b06d248
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -70,6 +70,10 @@ The starting position of the scroll area. Default: "top left".
 
 Options: "bottom", "bottom right", "top right", "right"
 
+### `browserOffset: String`
+
+The browser scroll bar width. Default: "17px". [It should fit for most browsers](https://codepen.io/sambible/post/browser-scrollbar-widths).
+
 ## Customization
 
 Adding a custom className to the component will give you power to customize the scrollbar's track and handler. Here is an example:

diff --git a/demo/src/entry.jsx b/demo/src/entry.jsx
@@ -40,7 +40,7 @@ let Root = React.createClass({
                         <div className="col-md-6">
                             <h4>Quick start</h4>
                             <div className="quick-start">
-                                <FreeScrollBar start={"top"}>
+                                <FreeScrollBar start={"top"} browserOffset={"20px"}>
                                     <div className="inner">{List}{List}{List}{List}{List}{List}{List}</div>
                                 </FreeScrollBar>
                             </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-free-scrollbar",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A react module for creating customizable scroll area",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,6 +1,8 @@
 var React = require('react');
 var findDOMNode = require('react-dom').findDOMNode;
 
+const { PropTypes } = React;
+
 const VERTICAL = 'vertial';
 const HORIZONTAL = 'horizontal';
 
@@ -14,8 +16,6 @@ const styles = {
         position: 'absolute',
         top: '0',
         left: '0',
-        right: '-15px',
-        bottom: '-15px',
         overflow: 'scroll',
         boxSizing: 'border-box'
     },
@@ -76,6 +76,17 @@ const styles = {
 module.exports = React.createClass({
     displayName: 'FreeScrollbar',
 
+    propTypes: {
+        className: PropTypes.string,
+        style: PropTypes.object,
+        fixed: PropTypes.bool,
+        autohide: PropTypes.bool,
+        timeout: PropTypes.number,
+        tracksize: PropTypes.string,
+        start: PropTypes.string,
+        browserOffset: PropTypes.string
+    },
+
     getDefaultProps() {
         return {
             className: '',
@@ -88,6 +99,7 @@ module.exports = React.createClass({
             timeout: 2000,
             tracksize: '10px',
             start: 'top left',
+            browserOffset: '17px'
         }
     },
 
@@ -166,7 +178,9 @@ module.exports = React.createClass({
         // Dynamic styles
         var containerStyles = {
             paddingBottom: this.props.fixed ? 0 : (this.state.showHorizontalTrack ? this.props.tracksize : 0),
-            paddingBottom: this.props.fixed ? 0 : (this.state.showVeriticalTrack ? this.props.tracksize : 0)
+            paddingBottom: this.props.fixed ? 0 : (this.state.showVeriticalTrack ? this.props.tracksize : 0),
+            right: `-${this.props.browserOffset}`,
+            bottom: `-${this.props.browserOffset}`
         };
         if (this.state.noselect) {
             containerStyles.MozUserSelect = 'none';