https://github.com/ambar/scroll-polyfill

Polyfill scroll methods and options
https://github.com/ambar/scroll-polyfill

scroll scroll-behavior scroll-polyfill scrollby scrollintoview scrollintoviewoptions scrollto scrolltooptions

Last synced: 28 days ago
JSON representation

Polyfill scroll methods and options

• Host: GitHub
• URL: https://github.com/ambar/scroll-polyfill
• Owner: ambar
• License: mit
• Created: 2020-03-02T15:26:40.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T11:12:31.000Z (over 2 years ago)
• Last Synced: 2025-04-23T05:58:07.346Z (28 days ago)
• Topics: scroll, scroll-behavior, scroll-polyfill, scrollby, scrollintoview, scrollintoviewoptions, scrollto, scrolltooptions
• Language: TypeScript
• Homepage: https://ambar.li/scroll-polyfill/
• Size: 4.38 MB
• Stars: 8
• Watchers: 0
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# scroll-polyfill

[![Coverage Status](https://coveralls.io/repos/github/ambar/scroll-polyfill/badge.svg?branch=master)](https://coveralls.io/github/ambar/scroll-polyfill?branch=master)

[![npm version](https://badgen.net/npm/v/scroll-polyfill)](https://www.npmjs.com/package/scroll-polyfill)

![](https://badgen.net/npm/types/scroll-polyfill)

Scroll options polyfill:

- Add [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) polyfill for `Element.protype.{scroll|scrollTo|scrollBy}`, `window.{scroll|scrollTo|scrollBy}`

- Add [`ScrollIntoViewOptions`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollInToView) polyfill for `Element.prototype.scrollIntoView`

- Smooth spring-based scrolling

## Install

```bash

npm install scroll-polyfill

```

## Usage

### Polyfill

```js

import 'scroll-polyfill/auto'

// OR:

import scrollPolyfill from 'scroll-polyfill'

scrollPolyfill()

// or you can force the polyfill (skiping feature detection)

scrollPolyfill({force: true})

// use ScrollToOptions

window.scroll({behavior: 'smooth', left: 100, top: 100})

scroller.scrollBy({behavior: 'smooth', top: 100})

// use ScrollIntoViewOptions

scrollerChild.scrollIntoView({

  behavior: 'smooth',

  block: 'nearest',

  inline: 'start',

})

document.body.scrollIntoView(false)

```

### [Ponyfill](https://ponyfill.com/)

These methods have smooth spring-based scrolling and are recommended even if polyfill is not installed:

```js

import {scrollTo, scrollBy, scrollIntoView} from 'scroll-polyfill'

scrollTo(window, {behavior: 'smooth', top: 100})

scrollBy(document.scrollingElement, {behavior: 'smooth', top: 100})

scrollIntoView(scrollerChild, {

  behavior: 'smooth',

  block: 'nearest',

  inline: 'start',

})

```