UNPKG

hide-scrollbar-react

Version:

just type the code <Scrollable>{your-great-contents}</Scrollable>

6 lines 5.75 kB
/*! * hide-scrollbar-react v1.1.6 - https://github.com/exilee20c/hide-scrollbar-react#readme * MIT Licensed */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports._exl_scrollable=t(require("react")):e._exl_scrollable=t(e.React)}(window,function(e){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){e.exports=r(4)},function(e,t,r){},,function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o);r(2);function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var i=function(e){function t(){var r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var n=arguments.length,i=Array(n),l=0;l<n;l++)i[l]=arguments[l];return r=o=s(this,e.call.apply(e,[this].concat(i))),o.state={is_appear:!1,scroll_disappear_timing:0,scroll_top:0,resize_cursor:0,is_thumb_pressed:!1,thumb_press_origin_scroll_top:0,thumb_press_origin_x:0,thumb_press_origin_y_of:0},o.scrollChanged=function(e){o.state.scroll_disappear_timing&&window.clearTimeout(o.state.scroll_disappear_timing),o.setState({scroll_top:e.currentTarget.scrollTop,is_appear:!0,resize_cursor:o.state.resize_cursor+1});var t=window.setTimeout(function(){return o.setState({is_appear:!1})},1200);o.setState({scroll_disappear_timing:t})},o.windowSizeChanged=function(e){o.setState({resize_cursor:o.state.resize_cursor+1})},o.mouseScrollStart=function(e){e.stopPropagation(),o.refs.scrollbar_inner===document.elementFromPoint(e.clientX,e.clientY)?o.setState({is_thumb_pressed:!0,thumb_press_origin_scroll_top:o.refs.scrollable_outer.scrollTop,thumb_press_origin_x:e.clientX,thumb_press_origin_y_of:e.clientY-o.refs.scrollbar_inner.getBoundingClientRect().top}):(e.persist(),o.setState({is_thumb_pressed:!0,thumb_press_origin_scroll_top:o.refs.scrollable_outer.scrollTop,thumb_press_origin_x:e.clientX,thumb_press_origin_y_of:o.refs.scrollbar_inner.getBoundingClientRect().height/2},function(){return o.mouseMove(e)}))},o.mouseScrollEnd=function(e){o.setState({is_thumb_pressed:!1,thumb_press_origin_scroll_top:o.refs.scrollable_outer.scrollTop,thumb_press_origin_x:0,thumb_press_origin_y_of:0})},o.mouseMove=function(e){if(e.buttons&&o.state.is_thumb_pressed){if(o.refs){var t=o.refs.scrollbar_outer.getBoundingClientRect().height/o.refs.scrollbar_inner.getBoundingClientRect().height;o.refs.scrollbar_outer&&o.refs.scrollbar_inner&&o.refs.scrollable_outer&&(Math.abs(e.clientX-o.state.thumb_press_origin_x)>100?o.refs.scrollable_outer.scrollTop=o.state.thumb_press_origin_scroll_top:o.refs.scrollable_outer.scrollTop=t*(e.clientY-o.state.thumb_press_origin_y_of-o.refs.scrollbar_outer.getBoundingClientRect().top))}}else o.mouseScrollEnd(e)},s(o,r)}return function(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)}(t,e),t.prototype.render=function(){var e,t,r=void 0,o=void 0,s=void 0;return this.refs&&(this.refs.scrollable_outer&&(r=this.refs.scrollable_outer.getBoundingClientRect().height),this.refs.scrollable_inner&&(o=this.refs.scrollable_inner.getBoundingClientRect().height),this.refs.scrollbar_outer&&(s=this.refs.scrollbar_outer.getBoundingClientRect().height),this.refs.scrollbar_inner&&this.refs.scrollbar_inner.getBoundingClientRect().height),t=(s-(e=o>r?r/o*s:s))*(this.state.scroll_top/(o-r)),n.a.createElement("section",{className:"exl-scrollable",style:this.props.style},n.a.createElement("div",{className:"exl-scrollable-container",style:this.props.inner_style,ref:"scrollable_outer",onMouseEnter:this.scrollChanged,onScroll:this.scrollChanged},n.a.createElement("div",{className:"exl-scrollable-content",ref:"scrollable_inner"},this.props.children)),n.a.createElement("div",{className:"exl-scrollable-scrollbar-wrapper"+(o>r?this.state.is_appear?" appear":"":" disappear"),ref:"scrollbar_outer",onMouseDown:this.mouseScrollStart},n.a.createElement("div",{className:"exl-scrollable-scrollbar-thumb",ref:"scrollbar_inner",style:{height:e+"px",top:t+"px"},onMouseDown:this.mouseScrollStart})))},t.prototype.componentDidMount=function(){window.addEventListener("resize",this.windowSizeChanged),window.addEventListener("mousemove",this.mouseMove)},t.prototype.componentWillUnmount=function(){window.removeEventListener("resize",this.windowSizeChanged),window.removeEventListener("mousemove",this.mouseMove)},t}(o.Component);r.d(t,"default",function(){return i})}]).default}); //# sourceMappingURL=hide-scrollbar-react.min.js.map