如何将实现视口元素动画的jQuery代码改写为原生JavaScript代码？

• 选择器语法错误：document.querySelectorAll('bowl') 是选择<bowl>标签，类选择器需要加前缀.，正确写法为document.querySelectorAll('.bowl')
• 未定义变量引用：$window是jQuery自定义变量，原生JS中直接使用全局window对象即可，滚动距离获取应写为window.scrollY
• forEach回调取值错误：querySelectorAll返回的NodeList调用forEach时，当前遍历元素会作为回调函数的第一个参数传入，直接使用this无法正确拿到对应DOM元素
• 方法误用：outerHeight()、offset()都是jQuery专属方法，原生JS没有对应实现，需要替换为原生属性/API：
  • 元素高度用offsetHeight属性（无括号，是属性不是方法）
  • 元素相对文档顶部位置用element.getBoundingClientRect().top + window.scrollY计算
• 类操作方法误用：addClass()、removeClass()是jQuery方法，原生DOM元素操作类名需要用classList.add()、classList.remove()方法

// 选择所有类名为bowl的元素
const animation_left_right_elements = document.querySelectorAll('.bowl');

function check_if_facilites_in_view() {
    // 获取窗口高度、当前滚动顶部位置、滚动底部位置
    const window_height = window.innerHeight;
    const window_top_position = window.scrollY;
    const window_bottom_position = window_top_position + window_height;

    // 遍历所有目标元素
    animation_left_right_elements.forEach(element => {
        // 获取元素高度、元素相对文档顶部位置、元素底部位置
        const element_height = element.offsetHeight;
        const element_top_position = element.getBoundingClientRect().top + window.scrollY;
        const element_bottom_position = element_top_position + element_height;

        // 检测元素是否在视口范围内
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            element.classList.add('animationToRight');
        } else {
            element.classList.remove('animationToRight');
        }
    });
}

// 可根据需求绑定滚动事件触发检测，示例如下：
// window.addEventListener('scroll', check_if_facilites_in_view);
// // 页面加载完成后先执行一次检测
// window.addEventListener('load', check_if_facilites_in_view);

内容的提问来源于stack exchange，提问作者Ihor