scroll-percentage - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

index.js

		@@ -1,26 +0,26 @@
		function calculateScrollPercentage (
		target,
		_scrollHeight,
		_clientHeight,
		gottaScroll,
		_scrollTop,
		percentage
		) {
		if (target) {
		function calculateScrollPercentage (target, childElemHeight) {
		try {
		if (!target) throw 'scrolling element height not found'

		let bool = target === document
		_scrollHeight = bool
		? _scrollHeight \|\| alert('provide second parameter')
		: target.scrollHeight
		_clientHeight = bool ? window.innerHeight : target.clientHeight
		_scrollTop = bool ? window.scrollY : target.scrollTop

		gottaScroll = _scrollHeight - _clientHeight
		percentage = Math.ceil(_scrollTop / gottaScroll * 100)
		} else {
		alert('No Target Was Provided')
		let scrollHeight = (() => {
		if (bool) return childElemHeight
		return target.scrollHeight
		})()

		if (!scrollHeight) throw 'child element height not found'

		let clientHeight = bool ? window.innerHeight : target.clientHeight
		let scrollTop = bool ? window.scrollY : target.scrollTop

		let gottaScroll = scrollHeight - clientHeight
		let percentage = Math.ceil((scrollTop / gottaScroll) * 100)

		return percentage
		} catch (err) {
		console.error(err)
		}

		return percentage
		}

		export { calculateScrollPercentage }

package.json

		{
		"name": "scroll-percentage",
		"version": "1.0.6",
		"description": "get the percentage value of how much the scrollable element has scrolled",
		"version": "1.0.7",
		"description": "get scrolled percentage of a scrollable element",
		"main": "dist/index.js",
		"author": "srsajjad",
		"license": "MIT",
		"devDependencies": {
		"@babel/cli": "^7.0.0-beta.56",
		"@babel/core": "^7.0.0-beta.56",
		"@babel/preset-env": "^7.0.0-beta.56"
		},
		"scripts": {
		"build": "rm -rf ./dist && mkdir dist && babel index.js -o dist/index.js"
		},
		"bugs": {
		@@ -17,0 +9,0 @@ "url": "https://github.com/srsajjad/scroll-percentage/issues"

README.md

		@@ -9,10 +9,11 @@ ```sh

		Provide the scrollable element as parameter -
		```javascript
		calculateScrollPercentage(scrollabaleElement)
		Or attach this `script` in your `html`.

		```html
		<script src="https://unpkg.com/scroll-percentage@1.0.7/dist/index.js"></script>
		```

		Like -

		```javascript
		document.querySelector('.scorllable-elem').addEventListener('scroll',e => {
		document.querySelector('.parent-elem').addEventListener('scroll',e => {
		let scrollPercentage = calculateScrollPercentage(e.target)
		@@ -23,6 +24,18 @@ console.log('scroll percentage', scrollPercentage)

		If the scrollable element is window, then a second parameter is necessary.\
		The second parameter - height of the element, `window` is scrolling by -
		```
		// If the parent/scrolling element is `window`,
		// then provide a second parameter - height of the child element.
		// Which is basically - the element `window` is scrolling by -
		```

		```javascript
		calculateScrollPercentage(e.target, document.querySelector(someElement).clientHeight)
		```
		let childElemHeight = document.querySelector('.child-elem').clientHeight

		window.addEventListener('scroll', e => {
		let scrollPercentage = calculateScrollPercentage(e.target, childElemHeight)
		console.log('scroll percentage', scrollPercentage)
		})
		```

		`N.B: While calculating the height of child elemenet,
		adjust the value with margin/padding size.`

babel.config.js

dist/index.js

New alerts