如何实现网页内容滚动触发与进入即触发的动画效果？

你的核心问题是当前代码仅在滚动时执行元素可见性检查，页面首次加载时不会触发动画。只需把检查逻辑抽成独立函数，在页面加载完成后主动调用一次即可：

修改后的代码 #

// 封装检查逻辑为独立函数
function checkVisibleElements() {
    let elements = $('.scroll-content');
    let screenSize = window.innerHeight;

    for(var i = 0; i < elements.length; i++) {
        var element = elements[i];

        if(element.getBoundingClientRect().top < screenSize) {
            element.classList.add('visible');
        }
    }
}

// 页面加载完成后立即执行一次检查
document.addEventListener('DOMContentLoaded', checkVisibleElements);

// 绑定到滚动事件，保持原有的滚动触发逻辑
window.onscroll = checkVisibleElements;

原理说明 #

• 将原本写在window.onscroll内的代码抽成独立函数后，既可以在页面加载完成时主动调用，也能继续绑定到滚动事件上复用逻辑
• DOMContentLoaded事件确保DOM结构完全渲染后再执行检查，避免元素未加载就获取导致的错误
• 头部大标题如果属于.scroll-content类，页面加载时会被检测到处于视口内，自动添加visible类触发CSS动画

如果头部标题需要单独处理（无需和其他滚动元素共用逻辑），也可以直接在页面加载时手动给它添加类：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.your-heading-class').classList.add('visible');
});

内容的提问来源于stack exchange，提问作者Óscar Rabadán