Vue页面滚动到底部无日志输出，滚动到顶部触发问题求助

你的问题出在页面高度取值判断错误和严格相等的匹配逻辑上，具体如下：

1. 错误使用offsetHeight而非scrollHeight
document.documentElement.offsetHeight获取的是根元素的可见高度（包含边框、内边距，不含滚动条和超出视口的内容），但你需要判断的是页面内容的总高度，应该用document.documentElement.scrollHeight——它包含所有内容（包括视口外的不可见部分）。

当你滚动到顶部时，scrollTop为0，此时0 + window.innerHeight刚好等于offsetHeight（视口高度），所以触发了打印；而滚动到底部时，scrollTop + innerHeight本该等于scrollHeight，但你用了错误的offsetHeight，自然匹配不上。

2. 严格相等===的精度问题
   浏览器计算滚动位置时可能出现小数（比如平滑滚动、高DPI屏幕），严格相等会导致判断条件无法触发，建议改用>=兼容这种情况。

修改后的代码 #

scroll () {
    window.onscroll = () => {
        const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
        const isBottom = scrollTop + window.innerHeight >= document.documentElement.scrollHeight;

        if (isBottom) {
            console.log('bottom');
        }
    }
},

额外优化建议 #

在Vue中，建议用addEventListener绑定滚动事件，避免直接覆盖window.onscroll导致和其他代码冲突，同时记得销毁组件时移除监听防止内存泄漏：

scroll () {
    const handleScroll = () => {
        const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
        const isBottom = scrollTop + window.innerHeight >= document.documentElement.scrollHeight;

        if (isBottom) {
            console.log('bottom');
        }
    };
    window.addEventListener('scroll', handleScroll);
    this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('scroll', handleScroll);
    });
},

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