https://github.com/hunghg255/window-onscroll

Window scroll
https://github.com/hunghg255/window-onscroll

npm scrolling

Last synced: 3 months ago
JSON representation

Window scroll

• Host: GitHub
• URL: https://github.com/hunghg255/window-onscroll
• Owner: hunghg255
• License: mit
• Created: 2023-11-30T15:27:11.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-01T23:46:29.000Z (about 1 year ago)
• Last Synced: 2024-09-17T17:19:23.628Z (5 months ago)
• Topics: npm, scrolling
• Language: HTML
• Homepage: https://window-onscroll.vercel.app/
• Size: 76.2 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        










  A library make window scroll smooth and easy to use





  

  

  

  

  



## Usage

Get it from [npm](https://www.npmjs.com/package/window-onscroll):

```sh

npm install window-onscroll

```

## Import it and use it:

```js

import ScrollManager from 'window-onscroll';

const sm = new ScrollManager();

console.log(sm.getScrollPosition());

// -> { scrollPositionX: 0, scrollPositionY: 0 }

window.addEventListener('window-scroll', function (e) {

  console.log('Vertical scroll position is: ' + e.detail.scrollPositionY);

  console.log('Horizontal scroll position is: ' + e.detail.scrollPositionX);

  requestAnimationFrame(function () {

    // repaint logic goes here

    // example:

    // rotateDiv.style.transform = 'rotate(' + e.detail.scrollPositionY / 2 + 'deg)';

  });

});

```

## Browser support

```js

  var sm = new ScrollManager();

  var valueDiv = document.querySelector('.ScrollPosition-value');

  var rotateDiv = document.querySelector('.ScrollPosition-rotate');

  window.addEventListener('window-onscroll', function (e) {

    requestAnimationFrame(function () {

      valueDiv.innerHTML = parseInt(e.detail.scrollPositionY, 10);

      rotateDiv.style.transform = 'rotate(' + e.detail.scrollPositionY / 2 + 'deg)';

    });

  });

```

## API

- `getScrollPosition()` - returns current window scroll position object.

  ```js

  {

    scrollPositionX: 0,

    scrollPositionY: 100,

  }

  ```

- `removeListener()` - reduces internal reference counter by one, and if it reaches 0 destroys the instance. Reference counter is increased every time `new ScrollManager` is called. For example, this is useful when scroll manager is used in React high order component (to track if any component is still using it). Use with caution.

- `destroy()` - destroys the singleton instance and removes `scroll` listener. Use with caution, call `removeListener` do this for you.