Using Smooth Scroll Polyfill with Angular 2 CLI

Question

Can anyone please guide how to use Smooth Scroll Polyfill with Angular 2 CLI.

I tried adding below to polyfills.ts but it throws error on work require

require('smoothscroll-polyfill').polyfill();

I then tried adding

import 'smoothscroll-polyfill';

Though it didn't throw any error during build but when I run the project in browser it show below error on console:

ERROR TypeError: Failed to execute 'scroll' on 'Window': No function was found that matched the signature provided.

Answer 1

Here's the Angular 2/4 solution:

Install smoothscroll-polyfill - npm install smoothscroll-polyfill.

Then add to your src/polyfills.ts file:

import smoothscroll from 'smoothscroll-polyfill/dist/smoothscroll.js';
smoothscroll.polyfill();

Answer 2

You need install the polyfill and @types

1. yarn add smoothscroll-polyfill or npm install smoothscroll-polyfill
2. yarn add @types/smoothscroll-polyfill or npm install @types/smoothscroll-polyfill

So, in your code you should init the polyfill in the component or service what you wish used this polyfill:

import * as smoothscroll from "smoothscroll-polyfill";

@Component({
  selector: 'app-my-demo',
  templateUrl: './app-my-demo.html',
  styleUrls: ['./app-my-demo.css']
})
export MyClass my implements OnInit {

  constructor(
  ) {
    smoothscroll.polyfill();
   }

You could use in the component, for example:

  clickAnyThing(event:any){
    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
  }

Answer 3

This is how I set it up in my polyfills.ts file:

import smoothscroll from 'smoothscroll-polyfill/dist/smoothscroll';
smoothscroll.polyfill();

Then you can use it like this:

your_element.scrollIntoView({ behavior: 'smooth' });

Answer 4

If you are using angular cli

First install the package:

npm install smoothscroll-polyfill

Then add the following to angular-cli.json under apps.scripts array:

"../node_modules/smoothscroll-polyfill/src/smoothscroll.js"

And then try something like:

window.scroll({ top: 400, left: 0, behavior: 'smooth' });

It should work.

Answer 5

#option 1

It can be included directly in the index.html it will run immediately and does not need to be invoked with smoothscroll.polyfill();

<script src="https://unpkg.com/smoothscroll-polyfill@0.4.3/dist/smoothscroll.min.js"></script>

#option 2

npm install smoothscroll-polyfill --save

including it in src/polyfills.ts

import 'smoothscroll-polyfill';

or adding it to scripts in .angular-cli.json should work.

---

Importing in the Component:

import  { polyfill } from "smoothscroll-polyfill"

polyfill()

• #use:

window.scroll({ top: 200, left: 0, behavior: 'smooth' });

---

• CodeSandbox

• In both cases, the script will detect if the spec is natively supported and take action only when necessary.

• smooth scroll behavior polyfill Documentation

• MDN: scroll-behavior Browser compatibility
• The code requires requestAnimationFrame polyfill for browsers which don't support it.

Answer 6

If you're using it with Typescript then you should install

npm install smoothscroll-polyfill @types/smoothscroll-polyfill

OR

yarn add smoothscroll-polyfill @types/smoothscroll-polyfill/

Then you can use it like below

    import * as smoothscroll from "smoothscroll-polyfill";
    smoothscroll.polyfill();

---

Alternatively, you can include polyfill only when it is needed. you can try something below if you're using webpack, parcel or any other build system which supports dynamic imports.

    if (!'scrollBehavior' in document.documentElement.style) {
    // Wait until the Polyfills are loaded
    Promise.all([
        import('smoothscroll-polyfill'),
        import('smoothscroll-anchor-polyfill')
    ])
        // then use the modules however you want
        .then(([smoothscrollPolyfill, smoothscrollAnchorPolyfill]) => {
        // (Unlike this package, smoothscroll-polyfill needs to be actively invoked: )
        smoothscroll.polyfill();
        });
    }