Skip to content

srsajjad/scroll-percentage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

yarn add scroll-percentage
import { calculateScrollPercentage } from 'scroll-percentage'

Or attach this script in your html.

<script src="https://unpkg.com/scroll-percentage@1.0.9/dist/index.js"></script>
document.querySelector('.parent-elem').addEventListener('scroll',e => {
  let scrollPercentage = calculateScrollPercentage(e.target)
  console.log('scroll percentage', scrollPercentage)
})
// 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 -
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.

About

Get vertically scrolled value in percentage

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published