如何解决作品集网站移动端首页标题在ScrollReveal中无法显示的问题

问题根源 #

作品集网站首页标题在移动端无法显示，核心原因出在ScrollReveal库的配置和HTML元素类名缺失：

• 原ScrollReveal对.heading类的显示配置仅在桌面端（窗口宽度>610px）生效，移动端无对应触发逻辑；
• HTML中首页标题元素未添加heading类，导致ScrollReveal无法识别目标元素并执行显示动画。

解决步骤 #

1. 调整ScrollReveal初始化逻辑：移除桌面端宽度限制，添加针对.heading类的全局显示配置；
2. 补全HTML类名：给首页标题元素加上heading类；
3. 测试验证：确认ScrollReveal能在移动端正确识别.heading元素并触发显示动画。

修改后的完整JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    // Initialize ScrollReveal for home-content
    ScrollReveal().reveal('.home-content', {
        delay: 200,
        opacity: 0,
        distance: '80px',
        duration: 1000,
        easing: 'ease',
        reset: true
    });

    let menuIcon = document.querySelector('#menu-icon');
    let navbar = document.querySelector('.navbar');

    menuIcon.onclick = () => {
        menuIcon.classList.toggle('bx-x');
        navbar.classList.toggle('active');
    };

    let sections = document.querySelectorAll('section');
    let navLinks = document.querySelector('header nav');

    window.onscroll = () => {
        let top = window.scrollY;

        sections.forEach(sec => {
            let offset = sec.offsetTop - 150;
            let height = sec.offsetHeight;
            let id = sec.getAttribute('id');

            if (top >= offset && top < offset + height) {
                let activeLink = navLinks.querySelector(`a[href*=${id}]`);

                navLinks.querySelectorAll('a').forEach(link => {
                    link.classList.remove('active');
                });

                if (activeLink) {
                    activeLink.classList.add('active');
                }
            }
        });

        let header = document.querySelector('header');
        header.classList.toggle('sticky', window.scrollY > 100);
    };

    // Initialize ScrollReveal with options for all views
    ScrollReveal({
        distance: '80px',
        duration: 2000,
        delay: 200
    });

    ScrollReveal().reveal('.home-content', { origin: 'top' });
    ScrollReveal().reveal('.heading', { origin: 'left' }); // Add this line for heading reveal
    ScrollReveal().reveal('.home-img, .services-container, .portfolio-box, .contact form', { origin: 'bottom' });
    ScrollReveal().reveal('.home-content h1, .about-img', { origin: 'left' });
    ScrollReveal().reveal('.home-content p, .about-content', { origin: 'right' });

    // Initialize Typed.js
    const typed = new Typed('.multiple-text', {
        strings: ['Aspiring Developer', 'Gamer', 'Student', 'Athlete'],
        typeSpeed: 100,
        backSpeed: 100,
        backdelay: 1000,
        loop: true
    });

    const form = document.querySelector('form');
    const fullName = document.getElementById("name");
    const email = document.getElementById("email");
    const phone = document.getElementById("phone");
    const subject = document.getElementById("subject");
    const mess = document.getElementById("message");

    function sendEmail() {
        const bodyMessage = `Full Name: ${fullName.value}<br> Email: ${email.value}<br> Phone Number: ${phone.value}<br> Message: ${mess.value}<br>`;

        Email.send({
            SecureToken: "e108a27e-9ccb-4823-bbc1-81e52d3d3f0a",
            To: "contactisindu@gmail.com",
            From: "contactisindu@gmail.com",
            Subject: subject.value,
            Body: bodyMessage
        }).then(
            message => {
                if (message == "OK") {
                    Swal.fire({
                        title: "Success!",
                        text: "Message sent successfully!",
                        icon: "success"
                    });
                }
            }
        );
    }

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        sendEmail();
    });
});

额外排查验证项 #

• 确认ScrollReveal代码中已添加.heading类的显示配置（即ScrollReveal().reveal('.heading', { origin: 'left' });这一行）；
• 检查HTML首页标题元素，确认class="heading"已正确添加；
• 在移动端测试页面滚动，验证标题能正常触发显示动画，无宽度限制导致的失效问题。

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