react-custom-scroll - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):e.ReactCustomScroll=t(e.react,e["react-dom"],e["prop-types"])}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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)}function s(e,t,o){return t=t||0===t?t:e,o=o||0===o?o:e,t>o?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e}function a(e,t){var o=t.getBoundingClientRect();return e.clientX>o.left&&e.clientX<o.left+o.width&&e.clientY>o.top&&e.clientY<o.top+o.height}function c(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),n=o*r,l=e.top-n;return{height:t,top:l}}var h=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}}(),u=o(2),p=o(3),d=function(e){function t(e){n(this,t);var o=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.onHandleDrag=o.onHandleDrag.bind(o),o.onHandleDragEnd=o.onHandleDragEnd.bind(o),o.blockOuterScroll=o.blockOuterScroll.bind(o),o.onScroll=o.onScroll.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){"undefined"!=typeof this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=p.findDOMNode(this),l=n.getBoundingClientRect(),i=this.getScrolledElement(),s=t.scrollPos>=o-r;this.contentHeight=i.scrollHeight,this.scrollbarYWidth=i.offsetWidth-i.clientWidth,this.visibleHeight=i.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var a=this.state.scrollPos>=this.contentHeight-this.visibleHeight,c=o!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:l.top+window.pageYOffset,left:l.left+window.pageXOffset},(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&c&&s&&!a&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=p.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=p.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=e.pageY-this.position.top,o=this.getScrollHandleStyle().top,r=void 0,n=t>o+this.scrollHandleHeight;return r=n?o+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):o-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,o=this.scrollbarYWidth||20,n=this.props.rtl?"marginLeft":"marginRight",l=(e={},r(e,n,-1*o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),i=(t={},r(t,n,this.scrollbarYWidth?0:o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:l,contentWrapper:i}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=c.call(this,this.getScrollHandleStyle());return u.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},u.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?u.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},u.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},u.createElement("div",{className:this.props.handleClass}))):null,u.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},u.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(u.Component);try{var f=o(4);d.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(g){}d.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=d},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){if("undefined"==typeof o){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}e.exports=o}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):e.ReactCustomScroll=t(e.react,e["react-dom"],e["prop-types"])}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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)}function s(e,t,o){return t=t||0===t?t:e,o=o||0===o?o:e,t>o?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e}function a(e,t){var o=t.getBoundingClientRect();return e.clientX>o.left&&e.clientX<o.left+o.width&&e.clientY>o.top&&e.clientY<o.top+o.height}function c(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),n=o*r,l=e.top-n;return{height:t,top:l}}var h=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}}(),u=o(2),p=o(3),d=function(e){function t(e){n(this,t);var o=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.onHandleDrag=o.onHandleDrag.bind(o),o.onHandleDragEnd=o.onHandleDragEnd.bind(o),o.blockOuterScroll=o.blockOuterScroll.bind(o),o.onScroll=o.onScroll.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){"undefined"!=typeof this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentWillReceiveProps",value:function(){this.externalRender=!0}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=this.getScrolledElement(),l=t.scrollPos>=o-r;this.contentHeight=n.scrollHeight,this.scrollbarYWidth=n.offsetWidth-n.clientWidth,this.visibleHeight=n.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1,this.toggleScrollIfNeeded(),(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&this.externalRender&&l&&this.updateScrollPosition(this.contentHeight-this.visibleHeight),this.externalRender=!1}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=p.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=p.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=p.findDOMNode(this),o=t.getBoundingClientRect(),r=o.top+window.pageYOffset,n=e.pageY-r,l=this.getScrollHandleStyle().top,i=void 0,s=n>l+this.scrollHandleHeight;return i=s?l+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):l-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,o=this.scrollbarYWidth||20,n=this.props.rtl?"marginLeft":"marginRight",l=(e={},r(e,n,-1*o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),i=(t={},r(t,n,this.scrollbarYWidth?0:o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:l,contentWrapper:i}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=c.call(this,this.getScrollHandleStyle());return u.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},u.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?u.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},u.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},u.createElement("div",{className:this.props.handleClass}))):null,u.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},u.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(u.Component);try{var f=o(4);d.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(e){}d.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=d},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){if("undefined"==typeof o){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}e.exports=o}])});

example/example.js

@@ -1,2 +0,7 @@
-!function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";var r=n(2),i=n(3),o=n(4);i.render(r.createElement(o),document.getElementById("body"))},function(e,t){e.exports=React},function(e,t){e.exports=ReactDOM},function(e,t,n){"use strict";function r(e){var t=window.location.href;e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)"),r=n.exec(t);return r?!!r[2]&&decodeURIComponent(r[2].replace(/\+/g," ")):null}var i=n(2),o=n(5),s=n(6),l=n(7);e.exports=i.createClass({displayName:"firstComp",getInitialState:function(){return{dynamicContentCounter:4}},getText:function(){return s.text},getDynamicContent:function(){return o.times(this.state.dynamicContentCounter,function(e){return"Content #"+e})},addContent:function(){this.setState({dynamicContentCounter:this.state.dynamicContentCounter+1})},removeContent:function(){this.setState({dynamicContentCounter:Math.max(this.state.dynamicContentCounter-1,4)})},getExamplesToDisplay:function(){var e=r("flex"),t=r("dynamic");return{flex:e,dynamic:t,standard:!e&&!t}},render:l})},function(e,t){e.exports=_},function(e,t,n){var r,i;r=[],i=function(){"use strict";return{shortText:"hello there young fellow hello there young fellow hello there young fellow hello there young fellow hello there young fellow hello                      there young fellow",text:"Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id eni."}}.apply(t,r),!(void 0!==i&&(e.exports=i))},function(e,t,n){"use strict";var r=n(2),i=n(5),o=n(8);e.exports=function(){function e(e,t,n){return r.createElement("div",{className:"dynamic-content",key:t},t)}function t(){var t=this.getExamplesToDisplay();return r.createElement("div",{className:"example-wrapper"},t.standard?r.createElement("div",{key:"native-example",className:"container native-scroll"},r.createElement("label",{className:"side-title"},"Native Scroll"),r.createElement("div",{className:"panel"},r.createElement("div",{className:"panel-header"},r.createElement("label",{className:"panel-title"},"This is boring")),r.createElement("div",{className:"panel-content-native panel-content"},r.createElement("div",{className:"content-fill"},this.getText())))):null,t.standard?r.createElement("div",{key:"cool-example",className:"container custom-scroll-example"},r.createElement("label",{className:"side-title"},"Custom Scroll"),r.createElement("div",{className:"panel"},r.createElement("div",{className:"panel-header"},r.createElement("label",{className:"panel-title"},"Cool Scrollbar !")),r.createElement(o,{allowOuterScroll:!0},r.createElement("div",{className:"panel-content-custom panel-content"},r.createElement("div",{className:"content-fill"},this.getText()))))):null,t.standard?r.createElement("div",{key:"crazy-example",className:"container custom-scroll-example"},r.createElement("label",{className:"side-title"},"Crazy Designer"),r.createElement("div",{className:"panel crazy-scroll"},r.createElement("div",{className:"panel-header"},r.createElement("label",{className:"panel-title"},"Who designed this ???")),r.createElement(o,{allowOuterScroll:!0},r.createElement("div",{className:"panel-content-custom panel-content"},r.createElement("div",{className:"content-fill"},this.getText()))))):null,t.flex?r.createElement("div",{key:"flex-example",className:"container example-flex-wrapper"},r.createElement("label",{className:"side-title"},"With CSS Flex"),r.createElement("div",{className:"panel flex-scroll"},r.createElement("div",{className:"panel-header"},r.createElement("label",{className:"panel-title"},"Flexbox!!!")),r.createElement(o,{allowOuterScroll:!0,flex:"1"},r.createElement("div",{className:"panel-content-custom panel-content"},r.createElement("div",{className:"content-fill"},this.getText()))))):null,t.dynamic?r.createElement("div",{key:"dynamic-example",className:"container example-dynamic-wrapper"},r.createElement("label",{className:"side-title"},"KeepAtBottom prop"),r.createElement("div",{className:"panel dynamic-scroll"},r.createElement("div",{className:"panel-header"},r.createElement("label",{className:"panel-title"},"DYNAMIC CONTENT!!!")),r.createElement(o,{allowOuterScroll:!0,keepAtBottom:!0},r.createElement("div",{className:"panel-content-custom panel-content"},r.createElement.apply(this,["div",{className:"content-fill"},i.map(this.getDynamicContent(),e.bind(this,t))])))),t.dynamic?r.createElement("button",{className:"dynamic-content-button",key:"addContent",onClick:this.addContent},"Add Content"):null,t.dynamic?r.createElement("button",{className:"dynamic-content-button",key:"removeContent",onClick:this.removeContent},"Remove Content"):null):null,r.createElement("div",{className:"scroll-creator"}))}return t.apply(this,[])}},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 s(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)}function l(e,t,n){return t=t||0===t?t:e,n=n||0===n?n:e,t>n?(console.error("min limit is greater than max limit"),e):e<t?t:e>n?n:e}function a(e,t){var n=t.getBoundingClientRect();return e.clientX>n.left&&e.clientX<n.left+n.width&&e.clientY>n.top&&e.clientY<n.top+n.height}function u(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var n=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),i=n*r,o=e.top-i;return{height:t,top:o}}var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),p=n(2),d=n(3),m=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.scrollbarYWidth=0,n.state={scrollPos:0,onDrag:!1},n.onHandleDrag=n.onHandleDrag.bind(n),n.onHandleDragEnd=n.onHandleDragEnd.bind(n),n.blockOuterScroll=n.blockOuterScroll.bind(n),n.onScroll=n.onScroll.bind(n),n.onMouseDown=n.onMouseDown.bind(n),n.onClick=n.onClick.bind(n),n}return s(t,e),c(t,[{key:"componentDidMount",value:function(){"undefined"!=typeof this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentDidUpdate",value:function(e,t){var n=this.contentHeight,r=this.visibleHeight,i=d.findDOMNode(this),o=i.getBoundingClientRect(),s=this.getScrolledElement(),l=t.scrollPos>=n-r;this.contentHeight=s.scrollHeight,this.scrollbarYWidth=s.offsetWidth-s.clientWidth,this.visibleHeight=s.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var a=this.state.scrollPos>=this.contentHeight-this.visibleHeight,u=n!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&u&&l&&!a&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),n=this.refs.contentWrapper;this.props.freezePosition&&(n.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),n=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(n)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=d.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=d.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=e.pageY-this.position.top,n=this.getScrollHandleStyle().top,r=void 0,i=t>n+this.scrollHandleHeight;return r=i?n+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):n-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,n=l(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(n);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,n=e.currentTarget.scrollHeight,r=n-e.currentTarget.offsetHeight,i=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+i<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+i>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,n=this.scrollbarYWidth||20,i=this.props.rtl?"marginLeft":"marginRight",o=(e={},r(e,i,-1*n),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),s=(t={},r(t,i,this.scrollbarYWidth?0:n),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:o,contentWrapper:s}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),n=u.call(this,this.getScrollHandleStyle());return p.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},p.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?p.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},p.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:n},p.createElement("div",{className:this.props.handleClass}))):null,p.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},p.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(p.Component);try{var f=n(9);m.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(h){}m.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=m},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol["for"]&&Symbol["for"]("react.element")||60103,i=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},o=!0;e.exports=n(11)(i,o)}else e.exports=n(17)()}).call(t,n(10))},function(e,t){function n(){p&&u&&(p=!1,u.length?c=u.concat(c):d=-1,c.length&&r())}function r(){if(!p){var e=s.call(null,n);p=!0;for(var t=c.length;t;){for(u=c,c=[];++d<t;)u&&u[d].run();d=-1,t=c.length}u=null,p=!1,l.call(null,e)}}function i(e,t){this.fun=e,this.array=t}function o(){}var s,l,a=e.exports={};!function(){try{s=setTimeout}catch(e){s=function(){throw new Error("setTimeout is not defined")}}try{l=clearTimeout}catch(e){l=function(){throw new Error("clearTimeout is not defined")}}}();var u,c=[],p=!1,d=-1;a.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];c.push(new i(e,t)),1!==c.length||p||s.call(null,r,0)},i.prototype.run=function(){this.fun.apply(null,this.array)},a.title="browser",a.browser=!0,a.env={},a.argv=[],a.version="",a.versions={},a.on=o,a.addListener=o,a.once=o,a.off=o,a.removeListener=o,a.removeAllListeners=o,a.emit=o,a.binding=function(e){throw new Error("process.binding is not supported")},a.cwd=function(){return"/"},a.chdir=function(e){throw new Error("process.chdir is not supported")},a.umask=function(){return 0}},function(e,t,n){(function(t){"use strict";var r=n(12),i=n(13),o=n(14),s=n(15),l=n(16);e.exports=function(e,n){function a(e){var t=e&&(C&&e[C]||e[H]);if("function"==typeof t)return t}function u(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function c(e){this.message=e,this.stack=""}function p(e){function r(r,u,p,d,m,f,h){if(d=d||O,f=f||p,h!==s)if(n)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var v=d+":"+p;!l[v]&&a<3&&(o(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",f,d),l[v]=!0,a++)}return null==u[p]?r?new c(null===u[p]?"The "+m+" `"+f+"` is marked as required "+("in `"+d+"`, but its value is `null`."):"The "+m+" `"+f+"` is marked as required in "+("`"+d+"`, but its value is `undefined`.")):null:e(u,p,d,m,f)}if("production"!==t.env.NODE_ENV)var l={},a=0;var u=r.bind(null,!1);return u.isRequired=r.bind(null,!0),u}function d(e){function t(t,n,r,i,o,s){var l=t[n],a=w(l);if(a!==e){var u=P(l);return new c("Invalid "+i+" `"+o+"` of type "+("`"+u+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function m(){return p(r.thatReturnsNull)}function f(e){function t(t,n,r,i,o){if("function"!=typeof e)return new c("Property `"+o+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var l=t[n];if(!Array.isArray(l)){var a=w(l);return new c("Invalid "+i+" `"+o+"` of type "+("`"+a+"` supplied to `"+r+"`, expected an array."))}for(var u=0;u<l.length;u++){var p=e(l,u,r,i,o+"["+u+"]",s);if(p instanceof Error)return p}return null}return p(t)}function h(){function t(t,n,r,i,o){var s=t[n];if(!e(s)){var l=w(s);return new c("Invalid "+i+" `"+o+"` of type "+("`"+l+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return p(t)}function v(e){function t(t,n,r,i,o){if(!(t[n]instanceof e)){var s=e.name||O,l=T(t[n]);return new c("Invalid "+i+" `"+o+"` of type "+("`"+l+"` supplied to `"+r+"`, expected ")+("instance of `"+s+"`."))}return null}return p(t)}function g(e){function n(t,n,r,i,o){for(var s=t[n],l=0;l<e.length;l++)if(u(s,e[l]))return null;var a=JSON.stringify(e);return new c("Invalid "+i+" `"+o+"` of value `"+s+"` "+("supplied to `"+r+"`, expected one of "+a+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?o(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,r.thatReturnsNull)}function y(e){function t(t,n,r,i,o){if("function"!=typeof e)return new c("Property `"+o+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var l=t[n],a=w(l);if("object"!==a)return new c("Invalid "+i+" `"+o+"` of type "+("`"+a+"` supplied to `"+r+"`, expected an object."));for(var u in l)if(l.hasOwnProperty(u)){var p=e(l,u,r,i,o+"."+u,s);if(p instanceof Error)return p}return null}return p(t)}function b(e){function n(t,n,r,i,o){for(var l=0;l<e.length;l++){var a=e[l];if(null==a(t,n,r,i,o,s))return null}return new c("Invalid "+i+" `"+o+"` supplied to "+("`"+r+"`."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?o(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,r.thatReturnsNull)}function E(){function e(e,t,n,r,i){return N(e[t])?null:new c("Invalid "+r+" `"+i+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function S(e){function t(t,n,r,i,o){var l=t[n],a=w(l);if("object"!==a)return new c("Invalid "+i+" `"+o+"` of type `"+a+"` "+("supplied to `"+r+"`, expected `object`."));for(var u in e){var p=e[u];if(p){var d=p(l,u,r,i,o+"."+u,s);if(d)return d}}return null}return p(t)}function N(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(N);if(null===t||e(t))return!0;var n=a(t);if(!n)return!1;var r,i=n.call(t);if(n!==t.entries){for(;!(r=i.next()).done;)if(!N(r.value))return!1}else for(;!(r=i.next()).done;){var o=r.value;if(o&&!N(o[1]))return!1}return!0;default:return!1}}function x(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function w(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":x(t,e)?"symbol":t}function P(e){var t=w(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function T(e){return e.constructor&&e.constructor.name?e.constructor.name:O}var C="function"==typeof Symbol&&Symbol.iterator,H="@@iterator",O="<<anonymous>>",k={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:m(),arrayOf:f,element:h(),instanceOf:v,node:E(),objectOf:y,oneOf:g,oneOfType:b,shape:S};return c.prototype=Error.prototype,k.checkPropTypes=l,k.PropTypes=k,k}}).call(t,n(10))},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){(function(t){"use strict";function n(e,t,n,i,o,s,l,a){if(r(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,i,o,s,l,a],p=0;u=new Error(t.replace(/%s/g,function(){return c[p++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(10))},function(e,t,n){(function(t){"use strict";var r=n(12),i=r;"production"!==t.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var i=0,o="Warning: "+e.replace(/%s/g,function(){return n[i++]});"undefined"!=typeof console&&console.error(o);try{throw new Error(o)}catch(s){}};i=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,i=Array(r>2?r-2:0),o=2;o<r;o++)i[o-2]=arguments[o];e.apply(void 0,[n].concat(i))}}}(),e.exports=i}).call(t,n(10))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,a,u){if("production"!==t.env.NODE_ENV)for(var c in e)if(e.hasOwnProperty(c)){var p;try{i("function"==typeof e[c],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",a||"React class",r,c),p=e[c](n,c,a,r,null,s)}catch(d){p=d}if(o(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",a||"React class",r,c,typeof p),p instanceof Error&&!(p.message in l)){l[p.message]=!0;var m=u?u():"";o(!1,"Failed %s type: %s%s",r,p.message,null!=m?m:"")}}}if("production"!==t.env.NODE_ENV)var i=n(13),o=n(14),s=n(15),l={};e.exports=r}).call(t,n(10))},function(e,t,n){"use strict";var r=n(12),i=n(13);e.exports=function(){function e(){i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}}]);
+!function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";var o=n(2),r=n(3),i=n(4);r.render(o.createElement(i),document.getElementById("body"))},function(e,t){e.exports=React},function(e,t){e.exports=ReactDOM},function(e,t,n){"use strict";function o(e){var t=window.location.href;e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)"),o=n.exec(t);return o?!!o[2]&&decodeURIComponent(o[2].replace(/\+/g," ")):null}var r=n(5),i=n(13),a=n(14),s=n(15);e.exports=r({displayName:"firstComp",getInitialState:function(){return{dynamicContentCounter:4}},getText:function(){return a.text},getDynamicContent:function(){return i.times(this.state.dynamicContentCounter,function(e){return"Content #"+e})},addContent:function(){this.setState({dynamicContentCounter:this.state.dynamicContentCounter+1})},removeContent:function(){this.setState({dynamicContentCounter:Math.max(this.state.dynamicContentCounter-1,4)})},getExamplesToDisplay:function(){var e=o("flex"),t=o("dynamic");return{flex:e,dynamic:t,standard:!e&&!t}},render:s})},function(e,t,n){"use strict";var o=n(2),r=n(6);if("undefined"==typeof o)throw Error("create-react-class could not find the React object. If you are using script tags, make sure that React is being loaded before create-react-class.");var i=(new o.Component).updater;e.exports=r(o.Component,o.isValidElement,i)},function(e,t,n){(function(t){"use strict";function o(e){return e}function r(e,n,r){function p(e,n,o){for(var r in n)n.hasOwnProperty(r)&&"production"!==t.env.NODE_ENV&&l("function"==typeof n[r],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",e.displayName||"ReactClass",u[o],r)}function d(e,t){var n=S.hasOwnProperty(t)?S[t]:null;P.hasOwnProperty(t)&&s("OVERRIDE_BASE"===n,"ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.",t),e&&s("DEFINE_MANY"===n||"DEFINE_MANY_MERGED"===n,"ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",t)}function m(e,o){if(o){s("function"!=typeof o,"ReactClass: You're attempting to use a component class or function as a mixin. Instead, just use a regular object."),s(!n(o),"ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object.");var r=e.prototype,i=r.__reactAutoBindPairs;o.hasOwnProperty(c)&&x.mixins(e,o.mixins);for(var a in o)if(o.hasOwnProperty(a)&&a!==c){var u=o[a],p=r.hasOwnProperty(a);if(d(p,a),x.hasOwnProperty(a))x[a](e,u);else{var m=S.hasOwnProperty(a),f="function"==typeof u,h=f&&!m&&!p&&o.autobind!==!1;if(h)i.push(a,u),r[a]=u;else if(p){var g=S[a];s(m&&("DEFINE_MANY_MERGED"===g||"DEFINE_MANY"===g),"ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.",g,a),"DEFINE_MANY_MERGED"===g?r[a]=v(r[a],u):"DEFINE_MANY"===g&&(r[a]=y(r[a],u))}else r[a]=u,"production"!==t.env.NODE_ENV&&"function"==typeof u&&o.displayName&&(r[a].displayName=o.displayName+"_"+a)}}}else if("production"!==t.env.NODE_ENV){var b=typeof o,E="object"===b&&null!==o;"production"!==t.env.NODE_ENV&&l(E,"%s: You're attempting to include a mixin that is either null or not an object. Check the mixins included by the component, as well as any mixins they include themselves. Expected object but got %s.",e.displayName||"ReactClass",null===o?null:b)}}function f(e,t){if(t)for(var n in t){var o=t[n];if(t.hasOwnProperty(n)){var r=n in x;s(!r,'ReactClass: You are attempting to define a reserved property, `%s`, that shouldn\'t be on the "statics" key. Define it as an instance property instead; it will still be accessible on the constructor.',n);var i=n in e;s(!i,"ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",n),e[n]=o}}}function h(e,t){s(e&&t&&"object"==typeof e&&"object"==typeof t,"mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.");for(var n in t)t.hasOwnProperty(n)&&(s(void 0===e[n],"mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",n),e[n]=t[n]);return e}function v(e,t){return function(){var n=e.apply(this,arguments),o=t.apply(this,arguments);if(null==n)return o;if(null==o)return n;var r={};return h(r,n),h(r,o),r}}function y(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function g(e,n){var o=n.bind(e);if("production"!==t.env.NODE_ENV){o.__reactBoundContext=e,o.__reactBoundMethod=n,o.__reactBoundArguments=null;var r=e.constructor.displayName,i=o.bind;o.bind=function(a){for(var s=arguments.length,u=Array(s>1?s-1:0),c=1;c<s;c++)u[c-1]=arguments[c];if(a!==e&&null!==a)"production"!==t.env.NODE_ENV&&l(!1,"bind(): React component methods may only be bound to the component instance. See %s",r);else if(!u.length)return"production"!==t.env.NODE_ENV&&l(!1,"bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See %s",r),o;var p=i.apply(o,arguments);return p.__reactBoundContext=e,p.__reactBoundMethod=n,p.__reactBoundArguments=u,p}}return o}function b(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var o=t[n],r=t[n+1];e[o]=g(e,r)}}function E(e){var n=o(function(e,o,i){"production"!==t.env.NODE_ENV&&l(this instanceof n,"Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory"),this.__reactAutoBindPairs.length&&b(this),this.props=e,this.context=o,this.refs=a,this.updater=i||r,this.state=null;var u=this.getInitialState?this.getInitialState():null;"production"!==t.env.NODE_ENV&&void 0===u&&this.getInitialState._isMockFunction&&(u=null),s("object"==typeof u&&!Array.isArray(u),"%s.getInitialState(): must return an object or null",n.displayName||"ReactCompositeComponent"),this.state=u});n.prototype=new w,n.prototype.constructor=n,n.prototype.__reactAutoBindPairs=[],N.forEach(m.bind(null,n)),m(n,D),m(n,e),m(n,O),n.getDefaultProps&&(n.defaultProps=n.getDefaultProps()),"production"!==t.env.NODE_ENV&&(n.getDefaultProps&&(n.getDefaultProps.isReactClassApproved={}),n.prototype.getInitialState&&(n.prototype.getInitialState.isReactClassApproved={})),s(n.prototype.render,"createClass(...): Class specification must implement a `render` method."),"production"!==t.env.NODE_ENV&&(l(!n.prototype.componentShouldUpdate,"%s has a method called componentShouldUpdate(). Did you mean shouldComponentUpdate()? The name is phrased as a question because the function is expected to return a value.",e.displayName||"A component"),l(!n.prototype.componentWillRecieveProps,"%s has a method called componentWillRecieveProps(). Did you mean componentWillReceiveProps()?",e.displayName||"A component"));for(var i in S)n.prototype[i]||(n.prototype[i]=null);return n}var N=[],S={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},x={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)m(e,t[n])},childContextTypes:function(e,n){"production"!==t.env.NODE_ENV&&p(e,n,"childContext"),e.childContextTypes=i({},e.childContextTypes,n)},contextTypes:function(e,n){"production"!==t.env.NODE_ENV&&p(e,n,"context"),e.contextTypes=i({},e.contextTypes,n)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=v(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,n){"production"!==t.env.NODE_ENV&&p(e,n,"prop"),e.propTypes=i({},e.propTypes,n)},statics:function(e,t){f(e,t)},autobind:function(){}},D={componentDidMount:function(){this.__isMounted=!0}},O={componentWillUnmount:function(){this.__isMounted=!1}},P={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e,t)},isMounted:function(){return"production"!==t.env.NODE_ENV&&(l(this.__didWarnIsMounted,"%s: isMounted is deprecated. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.",this.constructor&&this.constructor.displayName||this.name||"Component"),this.__didWarnIsMounted=!0),!!this.__isMounted}},w=function(){};return i(w.prototype,e.prototype,P),E}var i=n(8),a=n(9),s=n(10);if("production"!==t.env.NODE_ENV)var l=n(11);var u,c="mixins";u="production"!==t.env.NODE_ENV?{prop:"prop",context:"context",childContext:"child context"}:{},e.exports=r}).call(t,n(7))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function r(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(p===clearTimeout)return clearTimeout(e);if((p===o||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(e);try{return p(e)}catch(t){try{return p.call(null,e)}catch(t){return p.call(this,e)}}}function a(){h&&m&&(h=!1,m.length?f=m.concat(f):v=-1,f.length&&s())}function s(){if(!h){var e=r(a);h=!0;for(var t=f.length;t;){for(m=f,f=[];++v<t;)m&&m[v].run();v=-1,t=f.length}m=null,h=!1,i(e)}}function l(e,t){this.fun=e,this.array=t}function u(){}var c,p,d=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:n}catch(e){c=n}try{p="function"==typeof clearTimeout?clearTimeout:o}catch(e){p=o}}();var m,f=[],h=!1,v=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];f.push(new l(e,t)),1!==f.length||h||r(s)},l.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=u,d.addListener=u,d.once=u,d.off=u,d.removeListener=u,d.removeAllListeners=u,d.emit=u,d.prependListener=u,d.prependOnceListener=u,d.listeners=function(e){return[]},d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}},function(e,t){/*
+	object-assign
+	(c) Sindre Sorhus
+	@license MIT
+	*/
+"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function o(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var o=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==o.join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=o()?Object.assign:function(e,t){for(var o,s,l=n(e),u=1;u<arguments.length;u++){o=Object(arguments[u]);for(var c in o)i.call(o,c)&&(l[c]=o[c]);if(r){s=r(o);for(var p=0;p<s.length;p++)a.call(o,s[p])&&(l[s[p]]=o[s[p]])}}return l}},function(e,t,n){(function(t){"use strict";var n={};"production"!==t.env.NODE_ENV&&Object.freeze(n),e.exports=n}).call(t,n(7))},function(e,t,n){(function(t){"use strict";function n(e,t,n,r,i,a,s,l){if(o(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,s,l],p=0;u=new Error(t.replace(/%s/g,function(){return c[p++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};"production"!==t.env.NODE_ENV&&(o=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(7))},function(e,t,n){(function(t){"use strict";var o=n(12),r=o;if("production"!==t.env.NODE_ENV){var i=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var r=0,i="Warning: "+e.replace(/%s/g,function(){return n[r++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};r=function(e,t){if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){for(var n=arguments.length,o=Array(n>2?n-2:0),r=2;r<n;r++)o[r-2]=arguments[r];i.apply(void 0,[t].concat(o))}}}e.exports=r}).call(t,n(7))},function(e,t){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t){e.exports=_},function(e,t,n){var o,r;o=[],r=function(){"use strict";return{shortText:"hello there young fellow hello there young fellow hello there young fellow hello there young fellow hello there young fellow hello                      there young fellow",text:"Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id eni."}}.apply(t,o),!(void 0!==r&&(e.exports=r))},function(e,t,n){"use strict";var o=n(2),r=n(13),i=n(16);e.exports=function(){function e(e,t,n){return o.createElement("div",{className:"dynamic-content",key:t},t)}function t(){var t=this.getExamplesToDisplay();return o.createElement("div",{className:"example-wrapper"},t.standard?o.createElement("div",{key:"native-example",className:"container native-scroll"},o.createElement("label",{className:"side-title"},"Native Scroll"),o.createElement("div",{className:"panel"},o.createElement("div",{className:"panel-header"},o.createElement("label",{className:"panel-title"},"This is boring")),o.createElement("div",{className:"panel-content-native panel-content"},o.createElement("div",{className:"content-fill"},this.getText())))):null,t.standard?o.createElement("div",{key:"cool-example",className:"container custom-scroll-example"},o.createElement("label",{className:"side-title"},"Custom Scroll"),o.createElement("div",{className:"panel"},o.createElement("div",{className:"panel-header"},o.createElement("label",{className:"panel-title"},"Cool Scrollbar !")),o.createElement(i,{allowOuterScroll:!0},o.createElement("div",{className:"panel-content-custom panel-content"},o.createElement("div",{className:"content-fill"},this.getText()))))):null,t.standard?o.createElement("div",{key:"crazy-example",className:"container custom-scroll-example"},o.createElement("label",{className:"side-title"},"Crazy Designer"),o.createElement("div",{className:"panel crazy-scroll"},o.createElement("div",{className:"panel-header"},o.createElement("label",{className:"panel-title"},"Who designed this ???")),o.createElement(i,{allowOuterScroll:!0},o.createElement("div",{className:"panel-content-custom panel-content"},o.createElement("div",{className:"content-fill"},this.getText()))))):null,t.flex?o.createElement("div",{key:"flex-example",className:"container example-flex-wrapper"},o.createElement("label",{className:"side-title"},"With CSS Flex"),o.createElement("div",{className:"panel flex-scroll"},o.createElement("div",{className:"panel-header"},o.createElement("label",{className:"panel-title"},"Flexbox!!!")),o.createElement(i,{allowOuterScroll:!0,flex:"1"},o.createElement("div",{className:"panel-content-custom panel-content"},o.createElement("div",{className:"content-fill"},this.getText()))))):null,t.dynamic?o.createElement("div",{key:"dynamic-example",className:"container example-dynamic-wrapper"},o.createElement("label",{className:"side-title"},"KeepAtBottom prop"),o.createElement("div",{className:"panel dynamic-scroll"},o.createElement("div",{className:"panel-header"},o.createElement("label",{className:"panel-title"},"DYNAMIC CONTENT!!!")),o.createElement(i,{allowOuterScroll:!0,keepAtBottom:!0},o.createElement("div",{className:"panel-content-custom panel-content"},o.createElement.apply(this,["div",{className:"content-fill"},r.map(this.getDynamicContent(),e.bind(this,t))])))),t.dynamic?o.createElement("button",{className:"dynamic-content-button",key:"addContent",onClick:this.addContent},"Add Content"):null,t.dynamic?o.createElement("button",{className:"dynamic-content-button",key:"removeContent",onClick:this.removeContent},"Remove Content"):null):null,o.createElement("div",{className:"scroll-creator"}))}return t.apply(this,[])}},function(e,t,n){"use strict";function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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 a(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)}function s(e,t,n){return t=t||0===t?t:e,n=n||0===n?n:e,t>n?(console.error("min limit is greater than max limit"),e):e<t?t:e>n?n:e}function l(e,t){var n=t.getBoundingClientRect();return e.clientX>n.left&&e.clientX<n.left+n.width&&e.clientY>n.top&&e.clientY<n.top+n.height}function u(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var n=t-e.height,o=this.state.scrollPos/(this.contentHeight-this.visibleHeight),r=n*o,i=e.top-r;return{height:t,top:i}}var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),p=n(2),d=n(3),m=function(e){function t(e){r(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.scrollbarYWidth=0,n.state={scrollPos:0,onDrag:!1},n.onHandleDrag=n.onHandleDrag.bind(n),n.onHandleDragEnd=n.onHandleDragEnd.bind(n),n.blockOuterScroll=n.blockOuterScroll.bind(n),n.onScroll=n.onScroll.bind(n),n.onMouseDown=n.onMouseDown.bind(n),n.onClick=n.onClick.bind(n),n}return a(t,e),c(t,[{key:"componentDidMount",value:function(){"undefined"!=typeof this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentWillReceiveProps",value:function(){this.externalRender=!0}},{key:"componentDidUpdate",value:function(e,t){var n=this.contentHeight,o=this.visibleHeight,r=this.getScrolledElement(),i=t.scrollPos>=n-o;this.contentHeight=r.scrollHeight,this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1,this.toggleScrollIfNeeded(),(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&this.externalRender&&i&&this.updateScrollPosition(this.contentHeight-this.visibleHeight),this.externalRender=!1}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),n=this.refs.contentWrapper;this.props.freezePosition&&(n.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),n=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(n)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=d.findDOMNode(this.refs.customScrollbar);return l(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=d.findDOMNode(this.refs.scrollHandle);return l(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=d.findDOMNode(this),n=t.getBoundingClientRect(),o=n.top+window.pageYOffset,r=e.pageY-o,i=this.getScrollHandleStyle().top,a=void 0,s=r>i+this.scrollHandleHeight;return a=s?i+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):i-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,n=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),o=this.getScrollValueFromHandlePosition(n);this.updateScrollPosition(o)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,n=e.currentTarget.scrollHeight,o=n-e.currentTarget.offsetHeight,r=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+r<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+r>=o&&(t.scrollTop=o,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,n=this.scrollbarYWidth||20,r=this.props.rtl?"marginLeft":"marginRight",i=(e={},o(e,r,-1*n),o(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),a=(t={},o(t,r,this.scrollbarYWidth?0:n),o(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),o(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:i,contentWrapper:a}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),n=u.call(this,this.getScrollHandleStyle());return p.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},p.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?p.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},p.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:n},p.createElement("div",{className:this.props.handleClass}))):null,p.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},p.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(p.Component);try{var f=n(17);m.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(e){}m.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=m},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,r=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},i=!0;e.exports=n(18)(r,i)}else e.exports=n(21)()}).call(t,n(7))},function(e,t,n){(function(t){"use strict";var o=n(12),r=n(10),i=n(11),a=n(19),s=n(20);e.exports=function(e,n){function l(e){var t=e&&(w&&e[w]||e[T]);if("function"==typeof t)return t}function u(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function c(e){this.message=e,this.stack=""}function p(e){function o(o,u,p,d,m,f,h){if(d=d||C,f=f||p,h!==a)if(n)r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var v=d+":"+p;!s[v]&&l<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",f,d),s[v]=!0,l++)}return null==u[p]?o?new c(null===u[p]?"The "+m+" `"+f+"` is marked as required "+("in `"+d+"`, but its value is `null`."):"The "+m+" `"+f+"` is marked as required in "+("`"+d+"`, but its value is `undefined`.")):null:e(u,p,d,m,f)}if("production"!==t.env.NODE_ENV)var s={},l=0;var u=o.bind(null,!1);return u.isRequired=o.bind(null,!0),u}function d(e){function t(t,n,o,r,i,a){var s=t[n],l=D(s);if(l!==e){var u=O(s);return new c("Invalid "+r+" `"+i+"` of type "+("`"+u+"` supplied to `"+o+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function m(){return p(o.thatReturnsNull)}function f(e){function t(t,n,o,r,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){var l=D(s);return new c("Invalid "+r+" `"+i+"` of type "+("`"+l+"` supplied to `"+o+"`, expected an array."))}for(var u=0;u<s.length;u++){var p=e(s,u,o,r,i+"["+u+"]",a);if(p instanceof Error)return p}return null}return p(t)}function h(){function t(t,n,o,r,i){var a=t[n];if(!e(a)){var s=D(a);return new c("Invalid "+r+" `"+i+"` of type "+("`"+s+"` supplied to `"+o+"`, expected a single ReactElement."))}return null}return p(t)}function v(e){function t(t,n,o,r,i){if(!(t[n]instanceof e)){var a=e.name||C,s=P(t[n]);return new c("Invalid "+r+" `"+i+"` of type "+("`"+s+"` supplied to `"+o+"`, expected ")+("instance of `"+a+"`."))}return null}return p(t)}function y(e){function n(t,n,o,r,i){for(var a=t[n],s=0;s<e.length;s++)if(u(a,e[s]))return null;var l=JSON.stringify(e);return new c("Invalid "+r+" `"+i+"` of value `"+a+"` "+("supplied to `"+o+"`, expected one of "+l+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,o.thatReturnsNull)}function g(e){function t(t,n,o,r,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],l=D(s);if("object"!==l)return new c("Invalid "+r+" `"+i+"` of type "+("`"+l+"` supplied to `"+o+"`, expected an object."));for(var u in s)if(s.hasOwnProperty(u)){var p=e(s,u,o,r,i+"."+u,a);if(p instanceof Error)return p}return null}return p(t)}function b(e){function n(t,n,o,r,i){for(var s=0;s<e.length;s++){var l=e[s];if(null==l(t,n,o,r,i,a))return null}return new c("Invalid "+r+" `"+i+"` supplied to "+("`"+o+"`."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,o.thatReturnsNull)}function E(){function e(e,t,n,o,r){return S(e[t])?null:new c("Invalid "+o+" `"+r+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function N(e){function t(t,n,o,r,i){var s=t[n],l=D(s);if("object"!==l)return new c("Invalid "+r+" `"+i+"` of type `"+l+"` "+("supplied to `"+o+"`, expected `object`."));for(var u in e){var p=e[u];if(p){var d=p(s,u,o,r,i+"."+u,a);if(d)return d}}return null}return p(t)}function S(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(S);if(null===t||e(t))return!0;var n=l(t);if(!n)return!1;var o,r=n.call(t);if(n!==t.entries){for(;!(o=r.next()).done;)if(!S(o.value))return!1}else for(;!(o=r.next()).done;){var i=o.value;if(i&&!S(i[1]))return!1}return!0;default:return!1}}function x(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function D(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":x(t,e)?"symbol":t}function O(e){var t=D(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function P(e){return e.constructor&&e.constructor.name?e.constructor.name:C}var w="function"==typeof Symbol&&Symbol.iterator,T="@@iterator",C="<<anonymous>>",_={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:m(),arrayOf:f,element:h(),instanceOf:v,node:E(),objectOf:g,oneOf:y,oneOfType:b,shape:N};return c.prototype=Error.prototype,_.checkPropTypes=s,_.PropTypes=_,_}}).call(t,n(7))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function o(e,n,o,l,u){if("production"!==t.env.NODE_ENV)for(var c in e)if(e.hasOwnProperty(c)){var p;try{r("function"==typeof e[c],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",l||"React class",o,c),p=e[c](n,c,l,o,null,a)}catch(e){p=e}if(i(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",l||"React class",o,c,typeof p),p instanceof Error&&!(p.message in s)){s[p.message]=!0;var d=u?u():"";i(!1,"Failed %s type: %s%s",o,p.message,null!=d?d:"")}}}if("production"!==t.env.NODE_ENV)var r=n(10),i=n(11),a=n(19),s={};e.exports=o}).call(t,n(7))},function(e,t,n){"use strict";var o=n(12),r=n(10);e.exports=function(){function e(){r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}}]);
 //# sourceMappingURL=example.js.map

example/firstComp/firstComp.js

 'use strict';
-const React = require('react');
+const createReactClass = require('create-react-class')
 const _ = require('lodash');
@@ -22,3 +22,3 @@ const demoText = require('./demoText');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'firstComp',
@@ -25,0 +25,0 @@ getInitialState() {

package.json

 {
   "name": "react-custom-scroll",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -32,2 +32,3 @@ "main": "index",
     "babel-preset-react": "6.11.1",
+    "create-react-class": "^15.6.2",
     "css-loader": "0.23.1",
@@ -34,0 +35,0 @@ "eslint": "^3.6.11",

README.md

@@ -69,2 +69,3 @@ [![NPM version][npm-image]][npm-url]
 starting with lower case causes JSX to treat the tag as a native dom element
+- Make sure you have a height limit on the content root element (max-height)
 - Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.
@@ -71,0 +72,0 @@

src/main/customScroll.js

@@ -1,39 +0,39 @@
-'use strict';
-const React = require('react');
-const reactDOM = require('react-dom');
+'use strict'
+const React = require('react')
+const reactDOM = require('react-dom')
 
 function ensureWithinLimits(value, min, max) {
-    min = (!min && min !== 0) ? value : min;
-    max = (!max && max !== 0) ? value : max;
+    min = (!min && min !== 0) ? value : min
+    max = (!max && max !== 0) ? value : max
     if (min > max) {
-        console.error('min limit is greater than max limit');
-        return value;
+        console.error('min limit is greater than max limit')
+        return value
     }
     if (value < min) {
-        return min;
+        return min
     }
     if (value > max) {
-        return max;
+        return max
     }
-    return value;
+    return value
 }
 
 function isEventPosOnDomNode(event, domNode) {
-    const nodeClientRect = domNode.getBoundingClientRect();
+    const nodeClientRect = domNode.getBoundingClientRect()
     return (event.clientX > nodeClientRect.left &&
     event.clientX < nodeClientRect.left + nodeClientRect.width &&
     event.clientY > nodeClientRect.top &&
-    event.clientY < nodeClientRect.top + nodeClientRect.height);
+    event.clientY < nodeClientRect.top + nodeClientRect.height)
 }
 
 function enforceMinHandleHeight(calculatedStyle) {
-    const minHeight = this.props.minScrollHandleHeight;
+    const minHeight = this.props.minScrollHandleHeight
     if (calculatedStyle.height >= minHeight) {
-        return calculatedStyle;
+        return calculatedStyle
     }
 
-    const diffHeightBetweenMinAndCalculated = minHeight - calculatedStyle.height;
-    const scrollPositionToAvailableScrollRatio = this.state.scrollPos / (this.contentHeight - this.visibleHeight);
-    const scrollHandlePosAdjustmentForMinHeight = diffHeightBetweenMinAndCalculated * scrollPositionToAvailableScrollRatio;
-    const handlePosition = calculatedStyle.top - scrollHandlePosAdjustmentForMinHeight;
+    const diffHeightBetweenMinAndCalculated = minHeight - calculatedStyle.height
+    const scrollPositionToAvailableScrollRatio = this.state.scrollPos / (this.contentHeight - this.visibleHeight)
+    const scrollHandlePosAdjustmentForMinHeight = diffHeightBetweenMinAndCalculated * scrollPositionToAvailableScrollRatio
+    const handlePosition = calculatedStyle.top - scrollHandlePosAdjustmentForMinHeight
 
@@ -43,3 +43,3 @@ return {
         top: handlePosition
-    };
+    }
 }
@@ -49,16 +49,16 @@
     constructor(props) {
-        super(props);
+        super(props)
 
-        this.scrollbarYWidth = 0;
+        this.scrollbarYWidth = 0
         this.state = {
             scrollPos: 0,
             onDrag: false
-        };
+        }
 
-        this.onHandleDrag = this.onHandleDrag.bind(this);
-        this.onHandleDragEnd = this.onHandleDragEnd.bind(this);
-        this.blockOuterScroll = this.blockOuterScroll.bind(this);
-        this.onScroll = this.onScroll.bind(this);
-        this.onMouseDown = this.onMouseDown.bind(this);
-        this.onClick = this.onClick.bind(this);
+        this.onHandleDrag = this.onHandleDrag.bind(this)
+        this.onHandleDragEnd = this.onHandleDragEnd.bind(this)
+        this.blockOuterScroll = this.blockOuterScroll.bind(this)
+        this.onScroll = this.onScroll.bind(this)
+        this.onMouseDown = this.onMouseDown.bind(this)
+        this.onClick = this.onClick.bind(this)
     }
@@ -68,55 +68,55 @@
         if (typeof this.props.scrollTo !== 'undefined') {
-            this.updateScrollPosition(this.props.scrollTo);
+            this.updateScrollPosition(this.props.scrollTo)
         } else {
-            this.forceUpdate();
+            this.forceUpdate()
         }
     }
 
+    componentWillReceiveProps() {
+        this.externalRender = true;
+    }
+
     componentDidUpdate(prevProps, prevState) {
-        const prevContentHeight = this.contentHeight;
-        const prevVisibleHeight = this.visibleHeight;
-        const domNode = reactDOM.findDOMNode(this);
-        const boundingRect = domNode.getBoundingClientRect();
-        const innerContainer = this.getScrolledElement();
-        const reachedBottomOnPrevRender = prevState.scrollPos >= prevContentHeight - prevVisibleHeight;
+        const prevContentHeight = this.contentHeight
+        const prevVisibleHeight = this.visibleHeight
+        const innerContainer = this.getScrolledElement()
+        const reachedBottomOnPrevRender = prevState.scrollPos >= prevContentHeight - prevVisibleHeight
 
-        this.contentHeight = innerContainer.scrollHeight;
-        this.scrollbarYWidth = innerContainer.offsetWidth - innerContainer.clientWidth;
-        this.visibleHeight = innerContainer.clientHeight;
-        this.scrollRatio = this.contentHeight ? this.visibleHeight / this.contentHeight : 1;
-        const reachedBottomOnCurrentRender = this.state.scrollPos >= this.contentHeight - this.visibleHeight;
-        const contentResized = prevContentHeight !== this.contentHeight;
+        this.contentHeight = innerContainer.scrollHeight
+        this.scrollbarYWidth = innerContainer.offsetWidth - innerContainer.clientWidth
+        this.visibleHeight = innerContainer.clientHeight
+        this.scrollRatio = this.contentHeight ? this.visibleHeight / this.contentHeight : 1
 
-        this.toggleScrollIfNeeded();
+        this.toggleScrollIfNeeded()
 
-        this.position = {
-            top: boundingRect.top + window.pageYOffset,
-            left: boundingRect.left + window.pageXOffset
-        };
-
         if (this.props.freezePosition || prevProps.freezePosition) {
-            this.adjustFreezePosition(prevProps);
+            this.adjustFreezePosition(prevProps)
         }
         if (typeof this.props.scrollTo !== 'undefined' && this.props.scrollTo !== prevProps.scrollTo) {
-            this.updateScrollPosition(this.props.scrollTo);
-        } else if (this.props.keepAtBottom && contentResized && reachedBottomOnPrevRender && !reachedBottomOnCurrentRender) {
-            this.updateScrollPosition(this.contentHeight - this.visibleHeight);
+            this.updateScrollPosition(this.props.scrollTo)
+        } else if (
+            this.props.keepAtBottom &&
+            this.externalRender &&
+            reachedBottomOnPrevRender
+        ) {
+            this.updateScrollPosition(this.contentHeight - this.visibleHeight)
         }
+        this.externalRender = false
     }
 
     componentWillUnmount() {
-        document.removeEventListener('mousemove', this.onHandleDrag);
-        document.removeEventListener('mouseup', this.onHandleDragEnd);
+        document.removeEventListener('mousemove', this.onHandleDrag)
+        document.removeEventListener('mouseup', this.onHandleDragEnd)
     }
 
     adjustFreezePosition(prevProps) {
-        const innerContainer = this.getScrolledElement();
-        const contentWrapper = this.refs.contentWrapper;
+        const innerContainer = this.getScrolledElement()
+        const contentWrapper = this.refs.contentWrapper
 
         if (this.props.freezePosition) {
-            contentWrapper.scrollTop = this.state.scrollPos;
+            contentWrapper.scrollTop = this.state.scrollPos
         }
 
         if (prevProps.freezePosition) {
-            innerContainer.scrollTop = this.state.scrollPos;
+            innerContainer.scrollTop = this.state.scrollPos
         }
@@ -126,6 +126,6 @@ }
     toggleScrollIfNeeded() {
-        const shouldHaveScroll = this.contentHeight - this.visibleHeight > 1;
+        const shouldHaveScroll = this.contentHeight - this.visibleHeight > 1
         if (this.hasScroll !== shouldHaveScroll) {
-            this.hasScroll = shouldHaveScroll;
-            this.forceUpdate();
+            this.hasScroll = shouldHaveScroll
+            this.forceUpdate()
         }
@@ -135,11 +135,11 @@ }
     getScrollTop() {
-        return this.getScrolledElement().scrollTop;
+        return this.getScrolledElement().scrollTop
     }
 
     updateScrollPosition(scrollValue) {
-        const innerContainer = this.getScrolledElement();
-        innerContainer.scrollTop = scrollValue;
+        const innerContainer = this.getScrolledElement()
+        innerContainer.scrollTop = scrollValue
         this.setState({
             scrollPos: scrollValue
-        });
+        })
     }
@@ -149,44 +149,47 @@
         if (!this.hasScroll || !this.isMouseEventOnCustomScrollbar(event) || this.isMouseEventOnScrollHandle(event)) {
-            return;
+            return
         }
-        const newScrollHandleTop = this.calculateNewScrollHandleTop(event);
-        const newScrollValue = this.getScrollValueFromHandlePosition(newScrollHandleTop);
+        const newScrollHandleTop = this.calculateNewScrollHandleTop(event)
+        const newScrollValue = this.getScrollValueFromHandlePosition(newScrollHandleTop)
 
-        this.updateScrollPosition(newScrollValue);
+        this.updateScrollPosition(newScrollValue)
     }
 
     isMouseEventOnCustomScrollbar(event) {
-        const customScrollbar = reactDOM.findDOMNode(this.refs.customScrollbar);
-        return isEventPosOnDomNode(event, customScrollbar);
+        const customScrollbar = reactDOM.findDOMNode(this.refs.customScrollbar)
+        return isEventPosOnDomNode(event, customScrollbar)
     }
 
     isMouseEventOnScrollHandle(event) {
-        const scrollHandle = reactDOM.findDOMNode(this.refs.scrollHandle);
-        return isEventPosOnDomNode(event, scrollHandle);
+        const scrollHandle = reactDOM.findDOMNode(this.refs.scrollHandle)
+        return isEventPosOnDomNode(event, scrollHandle)
     }
 
     calculateNewScrollHandleTop(clickEvent) {
-        const clickYRelativeToScrollbar = clickEvent.pageY - this.position.top;
-        const scrollHandleTop = this.getScrollHandleStyle().top;
-        let newScrollHandleTop;
-        const isBelowHandle = clickYRelativeToScrollbar > (scrollHandleTop + this.scrollHandleHeight);
+        const domNode = reactDOM.findDOMNode(this)
+        const boundingRect = domNode.getBoundingClientRect()
+        const currentTop = boundingRect.top + window.pageYOffset
+        const clickYRelativeToScrollbar = clickEvent.pageY - currentTop
+        const scrollHandleTop = this.getScrollHandleStyle().top
+        let newScrollHandleTop
+        const isBelowHandle = clickYRelativeToScrollbar > (scrollHandleTop + this.scrollHandleHeight)
         if (isBelowHandle) {
-            newScrollHandleTop = scrollHandleTop + Math.min(this.scrollHandleHeight, this.visibleHeight - this.scrollHandleHeight);
+            newScrollHandleTop = scrollHandleTop + Math.min(this.scrollHandleHeight, this.visibleHeight - this.scrollHandleHeight)
         } else {
-            newScrollHandleTop = scrollHandleTop - Math.max(this.scrollHandleHeight, 0);
+            newScrollHandleTop = scrollHandleTop - Math.max(this.scrollHandleHeight, 0)
         }
-        return newScrollHandleTop;
+        return newScrollHandleTop
     }
 
     getScrollValueFromHandlePosition(handlePosition) {
-        return (handlePosition) / this.scrollRatio;
+        return (handlePosition) / this.scrollRatio
     }
 
     getScrollHandleStyle() {
-        const handlePosition = this.state.scrollPos * this.scrollRatio;
-        this.scrollHandleHeight = this.visibleHeight * this.scrollRatio;
+        const handlePosition = this.state.scrollPos * this.scrollRatio
+        this.scrollHandleHeight = this.visibleHeight * this.scrollRatio
         return {
             height: this.scrollHandleHeight,
             top: handlePosition
-        };
+        }
     }
@@ -197,3 +200,3 @@
             scrollPos: scrollPosition
-        });
+        })
     }
@@ -203,7 +206,7 @@
         if (this.props.freezePosition) {
-            return;
+            return
         }
-        this.adjustCustomScrollPosToContentPos(event.currentTarget.scrollTop);
+        this.adjustCustomScrollPosToContentPos(event.currentTarget.scrollTop)
         if (this.props.onScroll) {
-            this.props.onScroll(event);
+            this.props.onScroll(event)
         }
@@ -213,3 +216,3 @@ }
     getScrolledElement() {
-        return this.refs.innerContainer;
+        return this.refs.innerContainer
     }
@@ -219,20 +222,20 @@
         if (!this.hasScroll || !this.isMouseEventOnScrollHandle(event)) {
-            return;
+            return
         }
 
-        this.startDragHandlePos = this.getScrollHandleStyle().top;
-        this.startDragMousePos = event.pageY;
+        this.startDragHandlePos = this.getScrollHandleStyle().top
+        this.startDragMousePos = event.pageY
         this.setState({
             onDrag: true
-        });
-        document.addEventListener('mousemove', this.onHandleDrag);
-        document.addEventListener('mouseup', this.onHandleDragEnd);
+        })
+        document.addEventListener('mousemove', this.onHandleDrag)
+        document.addEventListener('mouseup', this.onHandleDragEnd)
     }
 
     onHandleDrag(event) {
-        event.preventDefault();
-        const mouseDeltaY = event.pageY - this.startDragMousePos;
-        const handleTopPosition = ensureWithinLimits(this.startDragHandlePos + mouseDeltaY, 0, this.visibleHeight - this.scrollHandleHeight);
-        const newScrollValue = this.getScrollValueFromHandlePosition(handleTopPosition);
-        this.updateScrollPosition(newScrollValue);
+        event.preventDefault()
+        const mouseDeltaY = event.pageY - this.startDragMousePos
+        const handleTopPosition = ensureWithinLimits(this.startDragHandlePos + mouseDeltaY, 0, this.visibleHeight - this.scrollHandleHeight)
+        const newScrollValue = this.getScrollValueFromHandlePosition(handleTopPosition)
+        this.updateScrollPosition(newScrollValue)
     }
@@ -243,6 +246,6 @@
             onDrag: false
-        });
-        e.preventDefault();
-        document.removeEventListener('mousemove', this.onHandleDrag);
-        document.removeEventListener('mouseup', this.onHandleDragEnd);
+        })
+        e.preventDefault()
+        document.removeEventListener('mousemove', this.onHandleDrag)
+        document.removeEventListener('mouseup', this.onHandleDragEnd)
     }
@@ -252,33 +255,33 @@
         if (this.props.allowOuterScroll) {
-            return;
+            return
         }
-        const contentNode = e.currentTarget;
-        const totalHeight = e.currentTarget.scrollHeight;
-        const maxScroll = totalHeight - e.currentTarget.offsetHeight;
-        const delta = e.deltaY % 3 ? (e.deltaY) : (e.deltaY * 10);
+        const contentNode = e.currentTarget
+        const totalHeight = e.currentTarget.scrollHeight
+        const maxScroll = totalHeight - e.currentTarget.offsetHeight
+        const delta = e.deltaY % 3 ? (e.deltaY) : (e.deltaY * 10)
         if (contentNode.scrollTop + delta <= 0) {
-            contentNode.scrollTop = 0;
-            e.preventDefault();
+            contentNode.scrollTop = 0
+            e.preventDefault()
         } else if (contentNode.scrollTop + delta >= maxScroll) {
-            contentNode.scrollTop = maxScroll;
-            e.preventDefault();
+            contentNode.scrollTop = maxScroll
+            e.preventDefault()
         }
-        e.stopPropagation();
+        e.stopPropagation()
     }
 
     getInnerContainerClasses() {
-        let res = 'inner-container';
+        let res = 'inner-container'
         if (this.state.scrollPos && this.props.addScrolledClass) {
-            res += ' content-scrolled';
+            res += ' content-scrolled'
         }
-        return res;
+        return res
     }
 
     getScrollStyles() {
-        const scrollSize = this.scrollbarYWidth || 20;
-        const marginKey = this.props.rtl ? 'marginLeft' : 'marginRight';
+        const scrollSize = this.scrollbarYWidth || 20
+        const marginKey = this.props.rtl ? 'marginLeft' : 'marginRight'
         const innerContainerStyle = {
             [marginKey]: (-1 * scrollSize),
             height: (this.props.heightRelativeToParent || this.props.flex) ? '100%' : ''
-        };
+        }
         const contentWrapperStyle = {
@@ -288,3 +291,3 @@ [marginKey]: this.scrollbarYWidth ? 0 : scrollSize,
             overflowY: this.props.freezePosition ? 'hidden' : 'visible'
-        };
+        }
 
@@ -294,3 +297,3 @@ return {
             contentWrapper: contentWrapperStyle
-        };
+        }
     }
@@ -301,21 +304,21 @@
             height: (this.props.heightRelativeToParent || this.props.flex) ? '100%' : ''
-        };
+        }
     }
 
     getRootStyles() {
-        const result = {};
+        const result = {}
 
         if (this.props.heightRelativeToParent) {
-            result.height = this.props.heightRelativeToParent;
+            result.height = this.props.heightRelativeToParent
         } else if (this.props.flex) {
-            result.flex = this.props.flex;
+            result.flex = this.props.flex
         }
 
-        return result;
+        return result
     }
 
     render() {
-        const scrollStyles = this.getScrollStyles();
-        const rootStyle = this.getRootStyles();
-        const scrollHandleStyle = enforceMinHandleHeight.call(this, this.getScrollHandleStyle());
+        const scrollStyles = this.getScrollStyles()
+        const rootStyle = this.getRootStyles()
+        const scrollHandleStyle = enforceMinHandleHeight.call(this, this.getScrollHandleStyle())
 
@@ -350,3 +353,3 @@ return (
             </div>
-        );
+        )
     }
@@ -356,3 +359,3 @@ }
 try {
-    const PropTypes = require('prop-types');
+    const PropTypes = require('prop-types')
     CustomScroll.propTypes = {
@@ -371,3 +374,3 @@ children: PropTypes.any,
         keepAtBottom: PropTypes.bool
-    };
+    }
 } catch (e) {} //eslint-disable-line no-empty
@@ -378,4 +381,4 @@
     minScrollHandleHeight: 38
-};
+}
 
-module.exports = CustomScroll;
+module.exports = CustomScroll

src/test/customScroll.spec.js

@@ -9,19 +9,21 @@ var React = require('react');
     'use strict';
+    let customScrollContainer;
 
     beforeEach(function () {
-        this.customScrollContainer = document.createElement('div');
-        this.customScrollContainer.id = 'testScrollContainer';
-        document.body.appendChild(this.customScrollContainer);
+        customScrollContainer = document.createElement('div');
+        customScrollContainer.id = 'testScrollContainer';
+        document.body.appendChild(customScrollContainer);
 
         this.totalScrollHeight = 200;
         this.visibleHeight = 100;
-        this.customScroll = renderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
+        this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
     });
 
     afterEach(function () {
-        document.body.removeChild(this.customScrollContainer);
+        reactDOM.unmountComponentAtNode(customScrollContainer);
+        document.body.removeChild(customScrollContainer);
     });
 
     function renderCustomScroll(container, props, visibleHeight, contentHeight) {
-        var scrolledContent = React.createElement('div', {
+        const scrolledContent = React.createElement('div', {
             style: {
@@ -32,3 +34,3 @@ height: contentHeight,
         });
-        var content = React.createElement('div', {
+        const content = React.createElement('div', {
             style: {
@@ -39,3 +41,3 @@ maxHeight: visibleHeight,
         }, scrolledContent);
-        var customScroll = reactDOM.render(React.createElement(customScrollClass, props, content), container);
+        const customScroll = reactDOM.render(React.createElement(customScrollClass, props, content), container);
         customScroll.forceUpdate();
@@ -45,2 +47,21 @@ return customScroll;
 
+    function renderCustomScrollWithRepeatedContent(container, props, visibleHeight, contentArr) {
+        const scrolledContent = contentArr.map(item => React.createElement('div', {
+            style: {
+                height: item.height,
+                width: 50
+            },
+            key: item.key
+        }));
+        const content = React.createElement('div', {
+            style: {
+                maxHeight: visibleHeight,
+                width: 50
+            }
+        }, scrolledContent);
+        const customScroll = reactDOM.render(React.createElement(customScrollClass, props, content), container);
+        customScroll.forceUpdate();
+        return customScroll;
+    }
+
     describe('general functionality', function () {
@@ -107,3 +128,3 @@ describe('getScrollStyles', function () {
                 var propsOnScroll = jasmine.createSpy('onScroll');
-                this.customScroll = renderCustomScroll(this.customScrollContainer, {
+                this.customScroll = renderCustomScroll(customScrollContainer, {
                     onScroll: propsOnScroll
@@ -143,3 +164,3 @@ }, this.visibleHeight, this.totalScrollHeight);
                     this.visibleHeight = 200;
-                    this.customScroll = renderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
+                    this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
                 });
@@ -157,3 +178,3 @@
                 it('should set the handle size to minimum height from props', function () {
-                    this.customScroll = renderCustomScroll(this.customScrollContainer, {
+                    this.customScroll = renderCustomScroll(customScrollContainer, {
                         minScrollHandleHeight: 50
@@ -179,3 +200,3 @@ }, this.visibleHeight, this.totalScrollHeight);
             this.visibleHeight = 100;
-            this.customScroll = renderCustomScroll(this.customScrollContainer, {
+            this.customScroll = renderCustomScroll(customScrollContainer, {
                 freezePosition: true
@@ -198,3 +219,3 @@ }, this.visibleHeight, this.totalScrollHeight);
             beforeEach(function () {
-                this.customScroll = renderCustomScroll(this.customScrollContainer, {
+                this.customScroll = renderCustomScroll(customScrollContainer, {
                     heightRelativeToParent: '70%'
@@ -218,3 +239,3 @@ }, this.visibleHeight, this.totalScrollHeight);
             beforeEach(function () {
-                this.customScroll = renderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
+                this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
             });
@@ -237,3 +258,3 @@
         beforeEach(function () {
-            this.customScroll = renderCustomScroll(this.customScrollContainer, {
+            this.customScroll = renderCustomScroll(customScrollContainer, {
                 flex: '2'
@@ -257,3 +278,3 @@ }, this.visibleHeight, this.totalScrollHeight);
         beforeEach(function () {
-            this.customScroll = renderCustomScroll(this.customScrollContainer, {
+            this.customScroll = renderCustomScroll(customScrollContainer, {
                 rtl: true
@@ -276,3 +297,3 @@ }, this.visibleHeight, this.totalScrollHeight);
         it('should replace the default class', function () {
-            this.customScroll = renderCustomScroll(this.customScrollContainer, {
+            this.customScroll = renderCustomScroll(customScrollContainer, {
                 handleClass: 'some-custom-class'
@@ -333,3 +354,3 @@ }, this.visibleHeight, this.totalScrollHeight);
             const visibleHeight = contentHeight + 100;
-            this.customScroll = renderCustomScroll(this.customScrollContainer, {}, visibleHeight, contentHeight);
+            this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, contentHeight);
 
@@ -402,3 +423,3 @@ const yOnHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height / 2;
             scrollToValue = 10;
-            customScroll = renderCustomScroll(this.customScrollContainer, {scrollTo: scrollToValue}, this.visibleHeight, this.totalScrollHeight);
+            customScroll = renderCustomScroll(customScrollContainer, {scrollTo: scrollToValue}, this.visibleHeight, this.totalScrollHeight);
             outerContainer = TestUtils.findRenderedDOMComponentWithClass(customScroll, 'outer-container');
@@ -414,5 +435,5 @@ });
         it('should work on first render', function () {
-            reactDOM.unmountComponentAtNode(this.customScrollContainer);
+            reactDOM.unmountComponentAtNode(customScrollContainer);
 
-            customScroll = renderCustomScroll(this.customScrollContainer, {scrollTo: scrollToValue}, this.visibleHeight, this.totalScrollHeight);
+            customScroll = renderCustomScroll(customScrollContainer, {scrollTo: scrollToValue}, this.visibleHeight, this.totalScrollHeight);
 
@@ -446,3 +467,3 @@ const contentContainerNode = customScroll.refs.innerContainer;
     });
-    
+
     describe('keepAtBottom', function () {
@@ -453,5 +474,5 @@ describe('when false', function () {
                 const expectedScrollTop = this.totalScrollHeight - this.visibleHeight;
-                
+
                 // scroll to bottom
-                renderCustomScroll(this.customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
+                renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
 
@@ -461,3 +482,3 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);
                 // add content                
-                renderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight + 500);
+                renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight + 500);
 
@@ -474,5 +495,5 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);
                     const expectedScrollTop = this.totalScrollHeight - this.visibleHeight + addedContentHeight;
-                    
+
                     // scroll to bottom
-                    renderCustomScroll(this.customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
+                    renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
 
@@ -482,3 +503,3 @@ expect(contentContainerNode.scrollTop).toEqual(this.totalScrollHeight - this.visibleHeight);
                     // add content                
-                    renderCustomScroll(this.customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight);
+                    renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight);
 
@@ -494,3 +515,3 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);
                     // add content                
-                    renderCustomScroll(this.customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight);
+                    renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight);
 
@@ -501,2 +522,21 @@ expect(contentContainerNode.scrollTop).toEqual(initialScrollTop);
 
+            describe('when content is replaced, with the same size', () => {
+                it('should keep scroll at bottom', function () {
+                    const contentContainerNode = this.customScroll.refs.innerContainer;
+
+                    const content = [1, 2, 3, 4, 5, 6, 7, 8];
+                    const contentItems = content.map(index => ({key: index, height: 40}));
+                    const newContentItems = content.map(index => ({key: index + 1, height: 40}));
+
+                    // scroll to bottom
+                    renderCustomScrollWithRepeatedContent(customScrollContainer, {keepAtBottom: true, scrollTo: 1500}, 100, contentItems);
+                    const scrollPosAfterFirstRender = contentContainerNode.scrollTop;
+
+                    // replace content
+                    renderCustomScrollWithRepeatedContent(customScrollContainer, {keepAtBottom: true}, 100, newContentItems);
+
+                    expect(contentContainerNode.scrollTop).toEqual(scrollPosAfterFirstRender);
+                });
+            });
+
             describe('when content is the same', function () {
@@ -508,7 +548,7 @@ it('should not scroll to bottom if the scroll is at the bottom', function () {
                     // scroll to bottom
-                    renderCustomScroll(this.customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
+                    renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight);
 
-                    expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);                    
+                    expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);
 
-                    renderCustomScroll(this.customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight);
+                    renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight);
 
@@ -519,3 +559,3 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop);
                 it('should allow regular scroll', function () {
-                    this.customScroll = renderCustomScroll(this.customScrollContainer, {
+                    this.customScroll = renderCustomScroll(customScrollContainer, {
                         keepAtBottom: true,
@@ -522,0 +562,0 @@ scrollTo: this.totalScrollHeight

No alert changes

Improved metrics

Total package byte prevSize

581590

increased by84.15%

Number of package files

38

increased by5.56%

Lines of code

2391

increased by2.57%

Number of lines in readme file

136

increased by0.74%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes