スクロールに追従してくれる便利プロパティ position: sticky 。これを IE11 でも使えるように wilddeer/stickyfill をインストールしました。
README の通りにやってみる。
sample.ts
import * as Stickyfill from 'stickyfilljs'
const elements: NodeListOf<HTMLElement> = document.querySelectorAll('.sticky');
Stickyfill.add(elements);
するとこんなエラーが出てきます。
Argument of type 'NodeListOf<HTMLElement>' is not assignable to parameter of type 'SingleOrMany<HTMLElement>'.
Property '[Symbol.iterator]' is missing in type 'NodeListOf<HTMLElement>' but required in type 'Iterable<HTMLElement>'.ts(2345)
え？NodeList は Iterable じゃない…？ for 文とか普通に回せると思うんだけど…。
色々調べて識者にも聞いてやっとわかったのは、stickyfill の仕様ではなく TypeScript のコンパイルオプションが足らなかったのが原因だった模様。
tsconfig.json の lib の項目に dom.iterable を追加しないと正しくコンパイルしてくれないっぽい。マジはまったわ。
tsconfig.json
{
"compilerOptions": {
"lib": ["es6", "dom", "dom.iterable"]
},
}
}
同じような現象に遭遇した方の参考になれば…。