将jQuery scrollTop转换为原生JS实现容器滚动方向反转

你的jQuery代码逻辑是监听窗口滚动事件，实时把滚动距离取反后设置为.container的bottom值，从而实现反向滚动效果。但你写的原生JS代码没实现这个逻辑，问题出在两点：

1. 滚动值只在初始化时获取了一次，没有在滚动事件里实时更新
2. 滚动事件里把bottom设为空字符串，完全没实现反转逻辑

下面是和jQuery逻辑完全对应的原生JS代码：

const container = document.querySelector('.container');

window.addEventListener('scroll', function() {
    // 实时获取当前窗口滚动距离，兼容现代浏览器和旧版
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 滚动距离取反后设置为bottom值，注意要加px单位
    container.style.bottom = `${scrollTop * -1}px`;
});

关键说明： #

• 原生JS设置行内样式时必须显式添加单位（比如px），jQuery会自动补全单位，但原生不会，这是很容易踩的坑
• window.pageYOffset是现代浏览器获取滚动距离的标准方式，document.documentElement.scrollTop用来兼容一些旧版浏览器
• 必须在scroll事件回调里实时获取滚动距离，这样每次滚动时都会更新容器的位置，和jQuery的逻辑保持一致

内容的提问来源于stack exchange，提问作者Mathieu Préaud