Question

任何人都可以指导如何将Smooth Scroll Polyfill与 Angular 2 CLI 一起使用。

我尝试将以下内容添加到 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

您需要安装polyfill和@types

yarn add smoothscroll-polyfill或npm install smoothscroll-polyfill
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 2

这是Angular 2/4解决方案：

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

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

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

Answer 3

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

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

然后你可以像这样使用它：

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

Answer 4

如果您使用的是角度cli

首先安装包：

CREATE PROCEDURE sp_actualizarOpFicha3( IN _numero INT, IN _tipo INT, IN _status_op INT, IN _status_vta VARCHAR(1), IN _fecha DATE, IN _hora VARCHAR(5), IN _paciente VARCHAR(40), IN _cirujano VARCHAR(5), IN _operacion VARCHAR(5), IN _centro VARCHAR(5), IN _vendedor VARCHAR(5), IN _asistente VARCHAR(5), IN _observ VARCHAR(80), IN _observ1 VARCHAR(80), IN _observ2 VARCHAR(80), IN _obs_ctro VARCHAR(80), IN _rut_cli VARCHAR(11), IN _nom_cli VARCHAR(50), IN _lista_p INT, IN _n_informe INT, IN _n_ocompra VARCHAR(15), IN _sucursal VARCHAR(5), IN _estado VARCHAR(1), IN _obs_desp1 VARCHAR(80), IN _proceso INT, IN _sub_proc INT, IN _req_asist INT, IN _desp_insum INT, OUT _res_up INT, OUT mensaje VARCHAR(30) ) BEGIN DECLARE countRow INT; START TRANSACTION; UPDATE mae_opera SET tipo=_tipo, status_op=_status_op, status_vta=_status_vta, fecha=_fecha, hora=_hora, paciente=_paciente, cirujano=_cirujano, operacion=_operacion, centro=_centro, vendedor=_vendedor, asistente=_asistente, observ=_observ, observ1=_observ1, observ2=_observ2, obs_ctro=_obs_ctro, rut_cli=_rut_cli, nom_cli=_nom_cli, lista_p=_lista_p, n_informe=_n_informe, n_ocompra=n_ocompra, sucursal=_sucursal, obs_desp1=_obs_desp1, estado=_estado, proceso=_proceso, sub_proc=_sub_proc, req_asist=_req_asist, desp_insum=_desp_insum WHERE numero = _numero; SET countRow = ROW_COUNT(); IF countRow = 1 THEN COMMIT; SET mensaje = 'Se actualizó correctamente la OP '; ELSE ROLLBACK; SET mensaje = 'Ocurrió un error al intentar actualizar la OP '; END IF;

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

npm install smoothscroll-polyfill

然后尝试类似的事情：

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

它应该有用。

Answer 5

如果将它与Typescript一起使用，则应安装

npm install smoothscroll-polyfill @types/smoothscroll-polyfill

OR

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

Answer 6

#option 1

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

进行调用

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

#option 2

npm install smoothscroll-polyfill --save

将其包含在src/polyfills.ts

中

import 'smoothscroll-polyfill';

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

在组件中导入：

import  { polyfill } from "smoothscroll-polyfill"

polyfill()

＃使用：

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

CodeSandbox
在这两种情况下，脚本都会检测规范是否原生支持，并仅在必要时采取措施。
smooth scroll behavior polyfill Documentation
MDN: scroll-behavior Browser compatibility
对于不支持它的浏览器，代码需要requestAnimationFrame polyfill。

使用带有Angular 2 CLI的Smooth Scroll Polyfill

6 个答案:

#option 1

#option 2

＃使用：

CodeSandbox