[JavaScript] 要素が画面内に表示されているか

getBoundingClientRect() を使うと簡単に判別できるようです。

要素が画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.top && rect.bottom < window.innerHeight;

要素が一部でも画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.bottom && rect.top < window.innerHeight;

See the Pen in view by phantom4 (@phantom4) on CodePen.

iPhoneではcodepenやiframeで上手く動きません。