Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-customscroll

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-customscroll - npm Package Compare versions

Comparing version 4.0.8 to 4.0.9

4

dist/main.js
/*!
* banner:
* react-customscroll: 4.0.8
* react-customscroll: 4.0.9
* Aleksandrov Sergey <gooddev.sergey@gmail.com> (https://github.com/AlexSergey/react-customscroll)
* This is little component for custom scroll in React
* This is little custom scroll React component.
* MIT
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.CustomScroll=e(require("react")):t.CustomScroll=e(t.React)}(this,function(t){return function(t){var e={};function l(s){if(e[s])return e[s].exports;var o=e[s]={i:s,l:!1,exports:{}};return t[s].call(o.exports,o,o.exports,l),o.l=!0,o.exports}return l.m=t,l.c=e,l.d=function(t,e,s){l.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},l.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},l.t=function(t,e){if(1&e&&(t=l(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(l.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)l.d(s,o,function(e){return t[e]}.bind(null,o));return s},l.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return l.d(e,"a",e),e},l.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},l.p="/",l(l.s=1)}([function(e,l){e.exports=t},function(t,e,l){"use strict";l.r(e);var s=l(0),o=l.n(s);function i(t,e,l){e.forEach(function(e){t.addEventListener(e,l)})}function r(t,e,l){e.forEach(function(e){t.removeEventListener(e,l)})}var c=function(t){return{scrollArea:{background:t.scrollAreaColor,width:t.scrollWidth,padding:"1px",zIndex:"10",top:"0",right:"0",position:"absolute",height:"100%"},scrollAreaFrame:{height:"100%",position:"relative"},scrollBar:{borderRadius:t.scrollBarRadius,position:"absolute",top:"0",width:"100%",background:t.scrollBarColor,cursor:"pointer"},ctmScroll:{overflow:"hidden",height:"100%",position:"relative"},ctmScrollActive:{paddingRight:t.scrollWidth},ctmScrollFrame:Object.assign({},t.virtualized?{height:"100%",width:"100%"}:{overflow:"hidden"},t.isZero?{width:`calc(100% - ${t.originalScrollWidth}px)`}:{}),noselect:{WebkitTouchCallout:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},ctmScrollHolder:{overflowY:"scroll",height:"100%"}}};var n=function(t,e,l){l?function t(e,l,s){if(s<=0)return!1;let o=(l-e.scrollTop)/s*10;setTimeout(function(){e.scrollTop=e.scrollTop+o,e.scrollTop!==l&&t.call(this,e,l,s-10)}.bind(this),10)}.call(this,t,e,500):t.scrollTop=e};(function(){let t;return{getInstance:function(){return t||(t=function(){function t(){let t=document.createEvent("Event");t.initEvent("mouseWithoutWindow",!0,!0),document.dispatchEvent(t)}document.addEventListener("mouseup",function(e){let l=window,s=document,o=s.documentElement,i=s.getElementsByTagName("body")[0],r=l.innerWidth||o.clientWidth||i.clientWidth,c=l.innerHeight||o.clientHeight||i.clientHeight;(e.clientX>=r||e.clientX<0||e.clientY>=c||e.clientY<0)&&t()}),window.addEventListener("blur",function(){t()})}()),t}}})().getInstance();const a=20,h=500,d=t=>"function"==typeof t;class u extends s.Component{constructor(t){super(t),this.nextWrapperHeight=0,this.nextHolderHeight=0,this.scrollID="_"+Math.random().toString(36).substr(2,9),u.scrollWidth||(u.scrollWidth=function(){let t=document.createElement("p");t.style.width="100%",t.style.height="200px";let e=document.createElement("div");e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.style.width="200px",e.style.height="150px",e.style.overflow="hidden",e.appendChild(t),document.body.appendChild(e);let l=t.offsetWidth;e.style.overflow="scroll";let s=t.offsetWidth;return l===s&&(s=e.clientWidth),document.body.removeChild(e),l-s}());let e=u.scrollWidth,l=this;this.isZero=0===e,this.isVirtualized="object"==typeof t.virtualized,this.isZero&&(e=17),this.reset=function(){l.removeListeners(),l.blockSelection(!0)},this.styles=c({virtualized:this.isVirtualized,isZero:this.isZero,originalScrollWidth:e,scrollWidth:void 0!==t.scrollWidth?t.scrollWidth:"6px",scrollAreaColor:void 0!==t.scrollAreaColor?t.scrollAreaColor:"#494949",scrollBarRadius:void 0!==t.scrollBarRadius?t.scrollBarRadius:"6px",scrollBarColor:void 0!==t.scrollBarColor?t.scrollBarColor:"#aeaeae"});let s=void 0!==t.className?t.className:"react-customscroll";this.restScrollAfterResize=function(){l.nextWrapperHeight=0,l.nextHolderHeight=0},i(document,["mouseWithoutWindow"],this.reset),i(window,["resize"],this.restScrollAfterResize),this.timer={},this.interval=setInterval(this.reinit.bind(this),h),this.state={width:`calc(100% + ${e}px)`,selection:!0,scrollAreaShow:!1,animate:t.animate||!0,classes:{base:s,holder:`${s}-holder`,frame:`${s}-frame`,area:`${s}-scrollbar-area`,"area-holder":`${s}-scrollbar-holder`,"scroll-bar":`${s}-scrollbar`},virtualState:this.isVirtualized?this.getScrollBarStyles(t.scrollTo||0):null},document&&document.getElementById&&(document.getElementById(this.scrollID)||function(t,e){let l=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.setAttribute("id",e),s.type="text/css",s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t)),l.appendChild(s)}(`\n#${this.scrollID}::-webkit-scrollbar {\n opacity: 0;\n}\n#${this.scrollID}::-webkit-scrollbar-track-piece {\n background-color: transparent;\n}\n `,this.scrollID))}componentDidMount(){this.scrollBlock=this.refs.customScrollHolder,this.customScroll=this.refs.customScroll,this.customScrollHolder=this.refs.customScrollFrame}componentWillUnmount(){if(document&&document.getElementById){let t=document.getElementById(this.scrollID);t&&t.parentNode.removeChild(t)}clearInterval(this.interval),this.removeListeners(),clearTimeout(this.timer)}getParams(){let t=0,e=0,l=0,s=0,o=this.refs["scroll-area"],i=window&&o?parseFloat(window.getComputedStyle(o,null).getPropertyValue("padding-top"))+parseFloat(window.getComputedStyle(o,null).getPropertyValue("padding-bottom")):0;return this.isVirtualized?(t=this.props.virtualized.height||0,e=this.props.virtualized.scrollHeight||0):(t=this.customScroll&&this.customScroll.offsetHeight,e=this.customScroll&&this.customScrollHolder.offsetHeight),0===e?(s=0,l=0):s=t*(l=(t-i)/e),{wrapperHeight:Math.ceil(t),holderHeight:e,percentDiff:l,height:s}}blockSelection(t){t||(document.selection?document.selection.empty():window.getSelection&&window.getSelection().removeAllRanges()),this.setState({selection:!!t})}onMouseDown(t){let e;if(t.stopPropagation(),t.preventDefault(),"which"in t?e=3===t.which:"button"in t&&(e=2===t.button),e)return setTimeout(this.endScroll),!1;let l=this.scrollBlock,s=t.touches?t.touches[0].pageY:t.pageY,o=this.isVirtualized?this.props.scrollTo||0:l.scrollTop;this.blockSelection(!1);let r=this;this.scrollRun=function(t){t.stopPropagation(),t.preventDefault();let{holderHeight:e,wrapperHeight:i}=r.getParams(),c=e/i,a=t.touches?t.touches[0].pageY:t.pageY;if(r.isVirtualized){let t=(a-s)*c+o;t=e-i<=t?e-i:t,d(r.props.scrollSync)&&r.props.scrollSync(t)}else n(l,(a-s)*c+o)},this.endScroll=function(){r.removeListeners(),r.blockSelection(!0)},i(document,["mouseup","touchend"],this.endScroll),i(document,["mousemove","touchmove"],this.scrollRun)}removeListeners(){r(document,["mouseWithoutWindow"],this.reset),r(window,["resize"],this.restScrollAfterResize),r(document,["mouseup","touchend"],this.endScroll),r(document,["mousemove","touchmove"],this.scrollRun)}reinit(){let{wrapperHeight:t,holderHeight:e}=this.getParams();if(t!==this.nextWrapperHeight||e!==this.nextHolderHeight)if(this.isVirtualized){let l=this.props.scrollTo||0,s=this.getScrollBarStyles(l);this.setState({virtualState:s,scrollAreaShow:e>t})}else this.setState({scrollAreaShow:e>t});this.nextWrapperHeight=t,this.nextHolderHeight=e}jump(t){let e=t.touches?t.touches[0].pageY:t.pageY,l=this.refs.scrollBar,s=this.scrollBlock.scrollTop,{wrapperHeight:o}=this.getParams(),i=this.scrollBlock.getBoundingClientRect().top;if(this.isVirtualized&&(l={},s=this.props.scrollTo||0,l.offsetTop=this.state.virtualState.top,l.offsetHeight=this.state.virtualState.height),e<i+l.offsetTop||e>i+l.offsetTop+l.offsetHeight){let t=s+o*(i+l.offsetTop<=e?1:-1);this.isVirtualized?d(this.props.scrollSync)&&this.props.scrollSync(t):n(this.scrollBlock,t)}}getScrollArea(){return o.a.createElement("div",{ref:"scroll-area",style:this.styles.scrollArea,onClick:this.jump.bind(this),className:this.state.classes.area},o.a.createElement("div",{ref:"scroll-area-holder",style:this.styles.scrollAreaFrame,className:this.state.classes["area-holder"]},o.a.createElement("div",{ref:"scrollBar",style:Object.assign({},this.styles.scrollBar,this.isVirtualized?this.state.virtualState:this.getScrollBarStyles.call(this)),onMouseDown:this.onMouseDown.bind(this),onTouchStart:this.onMouseDown.bind(this),className:this.state.classes["scroll-bar"]})))}scroll(){this.setState({scrollTop:this.scrollBlock.scrollTop})}getScrollBarStyles(t){let{holderHeight:e,percentDiff:l,height:s}=this.getParams();return 0===e&&0===l&&0===s?{top:0,height:0}:{top:(this.isVirtualized?t:this.state.scrollTop||this.scrollBlock.scrollTop)*(s<a?l-(a-s)/e:l),height:s<a?a:s}}componentWillReceiveProps(t){let e=parseInt(t.scrollTo);this.isVirtualized&&(e=e||0,this.setState({virtualState:this.getScrollBarStyles(e)})),void 0===e||isNaN(e)||this.isVirtualized||n.call(this,this.scrollBlock,e,this.state.animate)}setY(t){n.call(this,this.scrollBlock,t,this.state.animate)}render(){let t=this.state.selection?this.styles.ctmScroll:Object.assign({},this.styles.ctmScroll,this.styles.noselect),e=this.state.scrollAreaShow?Object.assign({},this.styles.ctmScrollFrame,this.styles.ctmScrollActive):this.styles.ctmScrollFrame;return o.a.createElement("div",{ref:"customScroll",style:t,className:this.state.classes.base},o.a.createElement("div",{ref:"customScrollHolder",style:Object.assign({},{width:this.state.width},this.styles.ctmScrollHolder),onScroll:this.scroll.bind(this),className:this.state.classes.holder,id:this.scrollID},o.a.createElement("div",{ref:"customScrollFrame",style:Object.assign({},e,this.isZero?{width:"100%"}:{}),className:this.state.classes.frame},d(this.props.children)?this.props.children(this.scrollBlock&&this.scrollBlock.scrollTop?this.scrollBlock.scrollTop:0):this.props.children),this.state.scrollAreaShow?this.getScrollArea.call(this):null))}}e.default=u}])});

4

package.json
{
"name": "react-customscroll",
"version": "4.0.8",
"description": "This is little component for custom scroll in React",
"version": "4.0.9",
"description": "This is little custom scroll React component.",
"main": "dist/main.js",

@@ -6,0 +6,0 @@ "scripts": {

11

README.md
# React Custom Scroll 4.0
This is little component for custom scroll in React. It is very customizable and flexible component. You can customization scrollbar.
This is little custom scroll React component. It is very customizable and flexible component. You can customization scrollbar.

@@ -21,3 +21,3 @@ [Demo](http://natrube.net/custom-scroll/index.html)

## How usage
## Usage

@@ -31,3 +31,2 @@ ### Step 1:

Inject component on your page:
```jsx

@@ -38,3 +37,4 @@ import CustomScroll from 'react-customscroll';

### Step 3:
Paste CustomScroll component inside wrapper block with height and overlow: hidden
Paste CustomScroll component inside wrapper block with height and "overflow: hidden"
For example:

@@ -48,6 +48,7 @@ ```jsx

```
See more examples in <strong>example/index.js</strong>
Here are a few examples <strong>example/index.js</strong>
## License
MIT
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc