react-customscroll - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

banner.txt

 |=======================================|
-|       React Custom Scroll 1.0.0       |
+|       React Custom Scroll 2.0.2       |
 |=======================================|
-This is simple custom scroll based on CSS
+This is little component for custom scroll in React. It is very customizable and flexible component. You can customization scrollbar
 
-github: https://github.com/AlexSergey/react-custom-scroll
+github: https://github.com/AlexSergey/react-customscroll

dist/customscroll.js

 /*!
  * |=======================================|
- * |       React Custom Scroll 1.0.0       |
+ * |       React Custom Scroll 2.0.2       |
  * |=======================================|
- * This is simple custom scroll based on CSS
+ * This is little component for custom scroll in React. It is very customizable and flexible component. You can customization scrollbar
  * 
- * github: https://github.com/AlexSergey/react-custom-scroll
+ * github: https://github.com/AlexSergey/react-customscroll
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CustomScroll=t(require("react")):e.CustomScroll=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return e[r].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},c=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=o(1),u=r(a),h=o(2),d=o(3),f=r(d),p=o(4),m=r(p),v=o(5),y=r(v),g=o(6),S=(r(g),o(7)),b=r(S),w=20,k=500,H=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),x=function(e){function t(e){l(this,t);var o=n(this,Object.getPrototypeOf(t).call(this,e));o.nextWrapperHeight=0,o.nextHolderHeight=0;var r=(0,f.default)(),i=o;return o.reset=function(){i.removeListeners(),i.blockSelection(!0)},o.styles=(0,b.default)({scrollWidth:"undefined"!=typeof e.scrollWidth?e.scrollWidth:"6px",scrollAreaColor:"undefined"!=typeof e.scrollAreaColor?e.scrollAreaColor:"#494949",scrollBarRadius:"undefined"!=typeof e.scrollBarRadius?e.scrollBarRadius:"6px",scrollBarColor:"undefined"!=typeof e.scrollBarColor?e.scrollBarColor:"#aeaeae"}),o.restScrollAfterResize=function(){i.nextWrapperHeight=0,i.nextHolderHeight=0},(0,h.on)(document,["mouseWithoutWindow"],o.reset),(0,h.on)(window,["resize"],o.restScrollAfterResize),o.timer={},o.interval=setInterval(o.reinit.bind(o),k),o.state={width:H?"100%":"calc(100% + "+r+"px)",selection:!0,scrollAreaShow:!1,animate:e.animate||!0},o}return i(t,e),c(t,[{key:"componentDidMount",value:function(){this.scrollBlock=this.refs.customScrollHolder,this.customScroll=this.refs.customScroll,this.customScrollHolder=this.refs.customScrollFrame}},{key:"componentWillUnmount",value:function(){clearInterval(this.interval),this.removeListeners(),clearTimeout(this.timer)}},{key:"getParams",value:function(){var e=this.customScroll.offsetHeight,t=this.customScrollHolder.offsetHeight,o=e/t,r=e*o;return{wrapperHeight:e,holderHeight:t,percentDiff:o,height:r}}},{key:"blockSelection",value:function(e){e||(0,m.default)(),this.setState({selection:!!e})}},{key:"onMouseDown",value:function(e){e.stopPropagation(),e.preventDefault();var t=this.scrollBlock,o=e.touches?e.touches[0].pageY:e.pageY,r=t.scrollTop;this.blockSelection(!1);var l=this;this.scrollRun=function(e){e.stopPropagation(),e.preventDefault();var n=l.getParams(),i=n.holderHeight,s=n.wrapperHeight,c=i/s,a=e.touches?e.touches[0].pageY:e.pageY;(0,y.default)(t,(a-o)*c+r)},this.endScroll=function(){l.removeListeners(),l.blockSelection(!0)},(0,h.on)(document,["mouseup","touchend"],this.endScroll),(0,h.on)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"removeListeners",value:function(){(0,h.off)(document,["mouseWithoutWindow"],this.reset),(0,h.off)(window,["resize"],this.restScrollAfterResize),(0,h.off)(document,["mouseup","touchend"],this.endScroll),(0,h.off)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"reinit",value:function(){var e=this.getParams(),t=e.wrapperHeight,o=e.holderHeight;t===this.nextWrapperHeight&&o===this.nextHolderHeight||this.setState({scrollAreaShow:o>t}),this.nextWrapperHeight=t,this.nextHolderHeight=o}},{key:"jump",value:function(e){var t=e.touches?e.touches[0].pageY:e.pageY,o=this.refs.scrollBar,r=this.scrollBlock.scrollTop,l=this.getParams(),n=l.wrapperHeight,i=this.scrollBlock.getBoundingClientRect().top;if(t<i+o.offsetTop||t>i+o.offsetTop+o.offsetHeight){var s=i+o.offsetTop<=t?1:-1,c=r+n*s;(0,y.default)(this.scrollBlock,c)}}},{key:"getScrollArea",value:function(){return u.default.createElement("div",{ref:"scroll-area",style:this.styles.scrollArea,onClick:this.jump.bind(this)},u.default.createElement("div",{ref:"scroll-area-holder",style:this.styles.scrollAreaFrame},u.default.createElement("div",{ref:"scrollBar",style:s({},this.styles.scrollBar,this.getScrollBarStyles.call(this)),onMouseDown:this.onMouseDown.bind(this),onTouchStart:this.onMouseDown.bind(this)})))}},{key:"scroll",value:function(){this.setState({scrollTop:this.scrollBlock.scrollTop})}},{key:"getScrollBarStyles",value:function(){var e=this.getParams(),t=e.holderHeight,o=e.percentDiff,r=e.height,l=this.state.scrollTop||this.scrollBlock.scrollTop,n=r<w?o-(w-r)/t:o,i=r<w?w:r;return{top:l*n,height:i}}},{key:"componentWillReceiveProps",value:function(e){var t=parseInt(e.scrollTo);"undefined"==typeof t||isNaN(t)||y.default.call(this,this.scrollBlock,t,this.state.animate)}},{key:"setY",value:function(e){y.default.call(this,this.scrollBlock,e,this.state.animate)}},{key:"render",value:function(){var e=this.state.selection?this.styles.ctmScroll:s({},this.styles.ctmScroll,this.styles.noselect),t=this.state.scrollAreaShow?s({},this.styles.ctmScrollFrame,this.styles.ctmScrollActive):this.styles.ctmScrollFrame;return u.default.createElement("div",{ref:"customScroll",style:e},u.default.createElement("div",{ref:"customScrollHolder",style:s({},{width:this.state.width},this.styles.ctmScrollHolder),onScroll:this.scroll.bind(this)},u.default.createElement("div",{ref:"customScrollFrame",style:t},this.props.children),this.state.scrollAreaShow?this.getScrollArea.call(this):null))}}]),t}(a.Component);e.exports=x},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){t.forEach(function(t){e.addEventListener(t,o)})}function r(e,t,o){t.forEach(function(t){e.removeEventListener(t,o)})}Object.defineProperty(t,"__esModule",{value:!0}),t.on=o,t.off=r},function(e,t){"use strict";function o(){var e=document.createElement("p");e.style.width="100%",e.style.height="200px";var t=document.createElement("div");t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t);var o=e.offsetWidth;t.style.overflow="scroll";var r=e.offsetWidth;return o===r&&(r=t.clientWidth),document.body.removeChild(t),o-r}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(){document.selection?document.selection.empty():window.getSelection&&window.getSelection().removeAllRanges()}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(e,t,r){if(r<=0)return!1;var l=t-e.scrollTop,n=l/r*10;setTimeout(function(){e.scrollTop=e.scrollTop+n,e.scrollTop!==t&&o.call(this,e,t,r-10)}.bind(this),10)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){r?o.call(this,e,t,500):e.scrollTop=t}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){function e(){var e=document.createEvent("Event");e.initEvent("mouseWithoutWindow",!0,!0),document.dispatchEvent(e)}document.addEventListener("mouseup",function(t){var o=window,r=document,l=r.documentElement,n=r.getElementsByTagName("body")[0],i=o.innerWidth||l.clientWidth||n.clientWidth,s=o.innerHeight||l.clientHeight||n.clientHeight;(t.clientX>=i||t.clientX<0||t.clientY>=s||t.clientY<0)&&e()}),window.addEventListener("blur",function(){e()})}var t;return{getInstance:function(){return t||(t=e()),t}}}(),r=o.getInstance();t.default=r},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return{scrollArea:{background:e.scrollAreaColor,width:e.scrollWidth,padding:"1px",zIndex:"10",top:"0",right:"0",position:"absolute",height:"100%"},scrollAreaFrame:{height:"100%",position:"relative"},scrollBar:{borderRadius:e.scrollBarRadius,position:"absolute",top:"0",width:"100%",background:e.scrollBarColor,cursor:"pointer"},ctmScroll:{overflow:"hidden",height:"100%",position:"relative"},ctmScrollActive:{paddingRight:e.scrollWidth},ctmScrollFrame:{overflow:"hidden"},noselect:{WebkitTouchCallout:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},ctmScrollHolder:{overflowY:"scroll",height:"100%"}}}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CustomScroll=t(require("react")):e.CustomScroll=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return e[r].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},c=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=o(1),u=r(a),h=o(2),d=o(3),f=r(d),p=o(4),m=r(p),v=o(5),y=r(v),g=o(6),b=(r(g),o(7)),S=r(b),w=20,k=500,H=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),x=function(e){function t(e){l(this,t);var o=s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));o.nextWrapperHeight=0,o.nextHolderHeight=0;var r=(0,f.default)(),n=o;o.reset=function(){n.removeListeners(),n.blockSelection(!0)},o.styles=(0,S.default)({scrollWidth:"undefined"!=typeof e.scrollWidth?e.scrollWidth:"6px",scrollAreaColor:"undefined"!=typeof e.scrollAreaColor?e.scrollAreaColor:"#494949",scrollBarRadius:"undefined"!=typeof e.scrollBarRadius?e.scrollBarRadius:"6px",scrollBarColor:"undefined"!=typeof e.scrollBarColor?e.scrollBarColor:"#aeaeae"});var i="undefined"!=typeof e.className?e.className:"react-customscroll";return o.restScrollAfterResize=function(){n.nextWrapperHeight=0,n.nextHolderHeight=0},(0,h.on)(document,["mouseWithoutWindow"],o.reset),(0,h.on)(window,["resize"],o.restScrollAfterResize),o.timer={},o.interval=setInterval(o.reinit.bind(o),k),o.state={width:H?"100%":"calc(100% + "+r+"px)",selection:!0,scrollAreaShow:!1,animate:e.animate||!0,classes:{base:i,holder:i+"-holder",frame:i+"-frame",area:i+"-scrollbar-area","area-holder":i+"-scrollbar-holder","scroll-bar":i+"-scrollbar"}},o}return n(t,e),c(t,[{key:"componentDidMount",value:function(){this.scrollBlock=this.refs.customScrollHolder,this.customScroll=this.refs.customScroll,this.customScrollHolder=this.refs.customScrollFrame}},{key:"componentWillUnmount",value:function(){clearInterval(this.interval),this.removeListeners(),clearTimeout(this.timer)}},{key:"getParams",value:function(){var e=this.customScroll.offsetHeight,t=this.customScrollHolder.offsetHeight,o=e/t,r=e*o;return{wrapperHeight:e,holderHeight:t,percentDiff:o,height:r}}},{key:"blockSelection",value:function(e){e||(0,m.default)(),this.setState({selection:!!e})}},{key:"onMouseDown",value:function(e){e.stopPropagation(),e.preventDefault();var t;if("which"in e?t=3===e.which:"button"in e&&(t=2===e.button),t)return setTimeout(this.endScroll),!1;var o=this.scrollBlock,r=e.touches?e.touches[0].pageY:e.pageY,l=o.scrollTop;this.blockSelection(!1);var s=this;this.scrollRun=function(e){e.stopPropagation(),e.preventDefault();var t=s.getParams(),n=t.holderHeight,i=t.wrapperHeight,c=n/i,a=e.touches?e.touches[0].pageY:e.pageY;(0,y.default)(o,(a-r)*c+l)},this.endScroll=function(){s.removeListeners(),s.blockSelection(!0)},(0,h.on)(document,["mouseup","touchend"],this.endScroll),(0,h.on)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"removeListeners",value:function(){(0,h.off)(document,["mouseWithoutWindow"],this.reset),(0,h.off)(window,["resize"],this.restScrollAfterResize),(0,h.off)(document,["mouseup","touchend"],this.endScroll),(0,h.off)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"reinit",value:function(){var e=this.getParams(),t=e.wrapperHeight,o=e.holderHeight;t===this.nextWrapperHeight&&o===this.nextHolderHeight||this.setState({scrollAreaShow:o>t}),this.nextWrapperHeight=t,this.nextHolderHeight=o}},{key:"jump",value:function(e){var t=e.touches?e.touches[0].pageY:e.pageY,o=this.refs.scrollBar,r=this.scrollBlock.scrollTop,l=this.getParams(),s=l.wrapperHeight,n=this.scrollBlock.getBoundingClientRect().top;if(t<n+o.offsetTop||t>n+o.offsetTop+o.offsetHeight){var i=n+o.offsetTop<=t?1:-1,c=r+s*i;(0,y.default)(this.scrollBlock,c)}}},{key:"getScrollArea",value:function(){return u.default.createElement("div",{ref:"scroll-area",style:this.styles.scrollArea,onClick:this.jump.bind(this),className:this.state.classes.area},u.default.createElement("div",{ref:"scroll-area-holder",style:this.styles.scrollAreaFrame,className:this.state.classes["area-holder"]},u.default.createElement("div",{ref:"scrollBar",style:i({},this.styles.scrollBar,this.getScrollBarStyles.call(this)),onMouseDown:this.onMouseDown.bind(this),onTouchStart:this.onMouseDown.bind(this),className:this.state.classes["scroll-bar"]})))}},{key:"scroll",value:function(){this.setState({scrollTop:this.scrollBlock.scrollTop})}},{key:"getScrollBarStyles",value:function(){var e=this.getParams(),t=e.holderHeight,o=e.percentDiff,r=e.height,l=this.state.scrollTop||this.scrollBlock.scrollTop,s=r<w?o-(w-r)/t:o,n=r<w?w:r;return{top:l*s,height:n}}},{key:"componentWillReceiveProps",value:function(e){var t=parseInt(e.scrollTo);"undefined"==typeof t||isNaN(t)||y.default.call(this,this.scrollBlock,t,this.state.animate)}},{key:"setY",value:function(e){y.default.call(this,this.scrollBlock,e,this.state.animate)}},{key:"render",value:function(){var e=this.state.selection?this.styles.ctmScroll:i({},this.styles.ctmScroll,this.styles.noselect),t=this.state.scrollAreaShow?i({},this.styles.ctmScrollFrame,this.styles.ctmScrollActive):this.styles.ctmScrollFrame;return u.default.createElement("div",{ref:"customScroll",style:e,className:this.state.classes.base},u.default.createElement("div",{ref:"customScrollHolder",style:i({},{width:this.state.width},this.styles.ctmScrollHolder),onScroll:this.scroll.bind(this),className:this.state.classes.holder},u.default.createElement("div",{ref:"customScrollFrame",style:t,className:this.state.classes.frame},this.props.children),this.state.scrollAreaShow?this.getScrollArea.call(this):null))}}]),t}(a.Component);e.exports=x},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){t.forEach(function(t){e.addEventListener(t,o)})}function r(e,t,o){t.forEach(function(t){e.removeEventListener(t,o)})}Object.defineProperty(t,"__esModule",{value:!0}),t.on=o,t.off=r},function(e,t){"use strict";function o(){var e=document.createElement("p");e.style.width="100%",e.style.height="200px";var t=document.createElement("div");t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t);var o=e.offsetWidth;t.style.overflow="scroll";var r=e.offsetWidth;return o===r&&(r=t.clientWidth),document.body.removeChild(t),o-r}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(){document.selection?document.selection.empty():window.getSelection&&window.getSelection().removeAllRanges()}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(e,t,r){if(r<=0)return!1;var l=t-e.scrollTop,s=l/r*10;setTimeout(function(){e.scrollTop=e.scrollTop+s,e.scrollTop!==t&&o.call(this,e,t,r-10)}.bind(this),10)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){r?o.call(this,e,t,500):e.scrollTop=t}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){function e(){var e=document.createEvent("Event");e.initEvent("mouseWithoutWindow",!0,!0),document.dispatchEvent(e)}document.addEventListener("mouseup",function(t){var o=window,r=document,l=r.documentElement,s=r.getElementsByTagName("body")[0],n=o.innerWidth||l.clientWidth||s.clientWidth,i=o.innerHeight||l.clientHeight||s.clientHeight;(t.clientX>=n||t.clientX<0||t.clientY>=i||t.clientY<0)&&e()}),window.addEventListener("blur",function(){e()})}var t;return{getInstance:function(){return t||(t=e()),t}}}(),r=o.getInstance();t.default=r},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return{scrollArea:{background:e.scrollAreaColor,width:e.scrollWidth,padding:"1px",zIndex:"10",top:"0",right:"0",position:"absolute",height:"100%"},scrollAreaFrame:{height:"100%",position:"relative"},scrollBar:{borderRadius:e.scrollBarRadius,position:"absolute",top:"0",width:"100%",background:e.scrollBarColor,cursor:"pointer"},ctmScroll:{overflow:"hidden",height:"100%",position:"relative"},ctmScrollActive:{paddingRight:e.scrollWidth},ctmScrollFrame:{overflow:"hidden"},noselect:{WebkitTouchCallout:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},ctmScrollHolder:{overflowY:"scroll",height:"100%"}}}}])});

package.json

 {
   "name": "react-customscroll",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "This is little component for custom scroll in React",
@@ -5,0 +5,0 @@ "main": "dist/customscroll.js",

src/index.jsx

@@ -42,2 +42,4 @@ import React, {Component} from 'react';
 
+        var className = typeof props.className !== 'undefined' ? props.className : 'react-customscroll';
+
         this.restScrollAfterResize = function() {
@@ -66,3 +68,11 @@ _this.nextWrapperHeight = 0;
             scrollAreaShow: false,
-            animate: props.animate || true
+            animate: props.animate || true,
+            classes: {
+                'base': className,
+                'holder': `${className}-holder`,
+                'frame': `${className}-frame`,
+                'area': `${className}-scrollbar-area`,
+                'area-holder': `${className}-scrollbar-holder`,
+                'scroll-bar': `${className}-scrollbar`,
+            }
         };
@@ -107,2 +117,16 @@ }
         evt.preventDefault();
+        /**
+         * If we clicked right mouse button we must skip this event
+         * */
+        var isRightMB;
+        if ('which' in evt) {
+            isRightMB = evt.which === 3;
+        } else if ('button' in evt) {
+            isRightMB = evt.button === 2;
+        }
+        if (isRightMB) {
+            setTimeout(this.endScroll);
+            return false;
+        }
+
         var elem = this.scrollBlock;
@@ -171,5 +195,5 @@ var startPoint = evt.touches ? evt.touches[0].pageY : evt.pageY;
     getScrollArea() {
-        return <div ref="scroll-area" style={this.styles.scrollArea} onClick={this.jump.bind(this)}>
-            <div ref="scroll-area-holder" style={this.styles.scrollAreaFrame}>
-                <div ref="scrollBar" style={Object.assign({}, this.styles.scrollBar, this.getScrollBarStyles.call(this))} onMouseDown={this.onMouseDown.bind(this)} onTouchStart={this.onMouseDown.bind(this)}/>
+        return <div ref="scroll-area" style={this.styles.scrollArea} onClick={this.jump.bind(this)} className={this.state.classes.area}>
+            <div ref="scroll-area-holder" style={this.styles.scrollAreaFrame} className={this.state.classes['area-holder']}>
+                <div ref="scrollBar" style={Object.assign({}, this.styles.scrollBar, this.getScrollBarStyles.call(this))} onMouseDown={this.onMouseDown.bind(this)} onTouchStart={this.onMouseDown.bind(this)} className={this.state.classes['scroll-bar']} />
             </div>
@@ -218,5 +242,5 @@ </div>;
         return (
-            <div ref="customScroll" style={ctmScroll}>
-                <div ref="customScrollHolder" style={Object.assign({}, {width: this.state.width}, this.styles.ctmScrollHolder)} onScroll={this.scroll.bind(this)}>
-                    <div ref="customScrollFrame" style={ctmScrollFrame}>
+            <div ref="customScroll" style={ctmScroll} className={this.state.classes.base}>
+                <div ref="customScrollHolder" style={Object.assign({}, {width: this.state.width}, this.styles.ctmScrollHolder)} onScroll={this.scroll.bind(this)} className={this.state.classes.holder}>
+                    <div ref="customScrollFrame" style={ctmScrollFrame} className={this.state.classes.frame}>
                         {this.props.children}
@@ -223,0 +247,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2488306

increased by2.88%

Lines of code

58739

increased by0.04%

No dependency changes