在 Angular 2 CLI 中使用 Smooth Scroll Polyfill

Question

谁能指导如何在 Angular 2 CLI 中使用 Smooth Scroll Polyfill。

我尝试在 polyfills.ts 中添加以下内容，但它在工作需要时引发错误

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

然后我尝试添加

import 'smoothscroll-polyfill';

虽然它在构建过程中没有抛出任何错误，但是当我在浏览器中运行项目时，它会在控制台上显示以下错误：

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

Answer 1

这是 Angular 2/4 解决方案：

安装smoothscroll-polyfill - npm install smoothscroll-polyfill。

然后添加到你的 src/polyfills.ts 文件中：

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

Answer 2

你需要安装 polyfill 和 @types

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

因此，在您的代码中，您应该在组件中初始化 polyfill 或为您希望使用此 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();
   }

你可以在组件中使用，例如：

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

Answer 3

这就是我在polyfills.ts 文件中的设置方式：

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

那么你可以这样使用它：

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

Answer 4

如果您使用的是角度剪辑

首先安装包：

npm install smoothscroll-polyfill

然后将以下内容添加到apps.scripts数组下的angular-cli.json中：

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

然后尝试类似：

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

它应该可以工作。

Answer 5

#选项 1

可以直接包含在index.html中，它会立即运行，不需要smoothscroll.polyfill();调用

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

#选项 2

npm install smoothscroll-polyfill --save

将其包含在src/polyfills.ts中

import 'smoothscroll-polyfill';

或将其添加到.angular-cli.json 中的scripts 应该可以。

---

在组件中导入：

import  { polyfill } from "smoothscroll-polyfill"

polyfill()

• #use:

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

---

• CodeSandbox

• 在这两种情况下，脚本都会检测是否原生支持规范并仅在必要时采取行动。

• smooth scroll behavior polyfill Documentation

• MDN: scroll-behavior Browser compatibility
• 对于不支持该代码的浏览器，该代码需要 requestAnimationFrame polyfill。

Answer 6

如果你将它与 Typescript 一起使用，那么你应该安装

npm install smoothscroll-polyfill @types/smoothscroll-polyfill

或

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

然后你可以像下面这样使用它

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

---

或者， 您可以仅在需要时包含 polyfill。如果您使用的是 webpack、parcel 或任何其他支持动态导入的构建系统，您可以尝试以下方法。

    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();
        });
    }