Nuxt.jsでsmoothscroll-polyfillを使う方法（Safariでsmoothスクロールを使えるようにしたい）

はじめに

こんな感じで（わかりにくいけど・・・）、safariでsmoothスクロールを使えるようにします！！

何が問題なのか？

cssとかでも「このブラウザは対応してないから表示が崩れた！」とか、今だにあるようじゃないですか

同じような問題が、javascriptでもあるようで、、、

 methods: {
    down() {
      window.scrollBy({
        left: 0,
        top: 235,
        behavior: "smooth", // ここだけsafariは効かない。。。
      });
      console.log("下がった！！");
    },
  },

👆こんな感じでwindow.scrollByでスムーズスクロールをさせたいのだがbehavior: "smooth"がなんとsafariでは効かないのである！！！
めんどくせーりんご帝国。。。日本では貧乏人でもiPhone持ってる国なんで、これは由々しき問題である！

smoothscroll-polyfillを導入するだけで、safariでスムーズスクロールが可能になる

これを導入します。

packageを入れる

# npm 
npm install smoothscroll-polyfill --save

# yarn 
yarn add smoothscroll-polyfill

pluginsにファイルを追加

そしてplugins/smooth-scroll.tsを作成
（まだpluginsフォルダがない場合は作成！）

plugins/smooth-scroll.ts

import Vue from 'vue'
import SmoothScroll from 'smoothscroll-polyfill'

SmoothScroll.polyfill();

Vue.use(SmoothScroll as any);

※私の場合、

Vue.use(SmoothScroll as any);

の部分でas anyがないと、よくわからないエラーが発生しました。。。
エラーがない人はas anyは特になくて良いかも！

No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<unknown> | PluginFunction<unknown>, options?: unknown): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof import("/Users/***/node_modules/@types/smoothscroll-polyfill/index")' is not assignable to parameter of type 'PluginObject<unknown> | PluginFunction<unknown>'.
      Property 'install' is missing in type 'typeof import("/Users/***/node_modules/@types/smoothscroll-polyfill/index")' but required in type 'PluginObject<unknown>'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof import("/Users/***/node_modules/@types/smoothscroll-polyfill/index")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Property 'install' is missing in type 'typeof import("/Users/***/node_modules/@types/smoothscroll-polyfill/index")' but required in type 'PluginObject<any>'.ts(2769)
plugin.d.ts(6, 3): 'install' is declared here.
plugin.d.ts(6, 3): 'install' is declared here.

nuxt.config.jsで読み込み

nuxt.config.js

 // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/smooth-scroll.ts', mode: 'client' },
  ],

これだけでsafariでsmoothスクロールが効くようになりました！！！
わーい

参考

polyfill.io？とやらを使ったやり方もあったりするようだが、よくわからなかったのでこの方法に落ち着きました