如何用JavaScript实现表格溢出指示图标移动后隐藏

云原生阿岚

2026-7-28

解决表格提示图标左移后自动隐藏的问题

问题说明

在WordPress站点中实现了表格溢出提示功能：页面滚动到目标表格时，指针图标从右向左移动。目前移动功能正常，需实现图标左移完成后自动隐藏的效果。

解决方案

通过监听CSS过渡结束事件(transitionend)，在动画完成后触发隐藏操作，同时优化CSS过渡效果让隐藏更平滑。

步骤1：修改CSS样式

为图标添加透明度过渡，并新增隐藏类：

.icon_over {
    font-size: 100px;
    color: #ff4949;
    position: absolute;
    top: 60px;
    right: 60px;
    z-index: 9;
    padding: 0;
    cursor: pointer;
    transition: all 1.5s ease-in-out;
    opacity: 1; /* 初始透明度 */
}

.icon_over-toggle {
    right: 75%;
    background: #ffffff82;
    border-radius: 50%;
    padding: 20px;
    transition: all 1.5s ease-in-out;
}

/* 新增隐藏类，控制透明度和交互 */
.icon_over-hide {
    opacity: 0;
    pointer-events: none;
}

步骤2：更新JavaScript逻辑

在添加移动类后监听过渡结束事件，触发隐藏操作并移除监听避免重复触发：

const Title_Description = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        const Content = entry.target.querySelector('.icon_over');

        if (entry.isIntersecting) {
            // 重置图标状态
            Content.classList.remove('icon_over-hide');
            Content.classList.add('icon_over-toggle');
            
            // 监听过渡结束事件
            const handleTransitionEnd = () => {
                Content.classList.add('icon_over-hide');
                Content.removeEventListener('transitionend', handleTransitionEnd);
            };
            Content.addEventListener('transitionend', handleTransitionEnd);
            return;
        }
        // 离开视图时重置所有状态
        Content.classList.remove('icon_over-toggle');
        Content.classList.remove('icon_over-hide');
    });
});

Title_Description.observe(document.querySelector('#box_table'));

完整代码示例

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="body-page">
    <h1> Title content site </h1>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sed, labore corrupti doloremque doloribus
        eveniet, fugit est perferendis consequuntur nostrum reiciendis vel et eius! Excepturi sit dolorem numquam
        magni consectetur et enim delectus in labore iste. Consequatur eveniet natus laudantium quaerat cupiditate
        accusantium quisquam error dolorem optio provident dolorum minima esse blanditiis eligendi velit inventore
        at culpa quis voluptates aliquam ab animi, iure hic? Repellendus commodi ullam numquam vel, tenetur iure
        dis ipsum minima dolorem dolore facilis
        id molestiae quisquam suscipit earum cum, repellat maxime vel neque. Illum laudantium quasi doloremque cum
        doloremque velit! Dolor aspernatur accusamus ex! Possimus dolor blanditiis debitis iusto harum facilis illo
        voluptatibus labore deserunt.
    </p>

    <div id="box_table" class="box_table">
        <span class="bi bi-hand-index-thumb-fill icon_over"></span>
        <table class="table-page">
            <thead>
                <tr class="column-table">
                    <th class="column_header">Header column 1</th>
                    <th class="column_header">Header column 2</th>
                    <th class="column_header">Header column 3</th>
                    <th class="column_header">Header column 4</th>
                    <th class="column_header">Header column 5</th>
                    <th class="column_header">Header column 6</th>
                </tr>
            </thead>
            <tbody>
                <tr class="row-table">
                    <td class="row_content">
                        <span>Content column 1 (Row 1)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 2 (Row 1)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 3 (Row 1)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 4 (Row 1)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 5 (Row 1)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 6 (Row 1)</span>
                    </td>
                </tr>
                <tr class="row-table">
                    <td class="row_content">
                        <span>Content column 1 (Row 2)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 2 (Row 2)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 3 (Row 2)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 4 (Row 2)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 5 (Row 2)</span>
                    </td>
                    <td class="row_content">
                        <span>Content column 6 (Row 2)</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</div>

CSS

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    background: #eee;
    direction: ltr;
    margin: 2rem 3rem;
    padding: 20px;
}

.body-page h1 {
    font-size: 3rem;
    padding: 10px;
}

.body-page p {
    font-size: 1.5rem;
    line-height: 50px;
    text-align: left;
    padding: 15px;
    margin: 40px;
}

.box_table {
    overflow-x: scroll;
    position: relative;
}

.icon_over {
    font-size: 100px;
    color: #ff4949;
    position: absolute;
    top: 60px;
    right: 60px;
    z-index: 9;
    padding: 0;
    cursor: pointer;
    transition: all 1.5s ease-in-out;
    opacity: 1;
}

.icon_over-toggle {
    right: 75%;
    background: #ffffff82;
    border-radius: 50%;
    padding: 20px;
    transition: all 1.5s ease-in-out;
}

.icon_over-hide {
    opacity: 0;
    pointer-events: none;
}

.column_header {
    font-size: 3rem;
    white-space: nowrap;
    padding: 20px;
    color: #fff;
    background: #5b5effb5;
}

.column_header:nth-last-of-type(2n-2) {
    background: #7ebcff;
}

.row_content {
    font-size: 2rem;
    padding: 10px;
    color: #000;
    background: #5b5effcf;
}

.row_content:nth-of-type(2n-1) {
    background: #95c8ff;
}

JavaScript

const Title_Description = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        const Content = entry.target.querySelector('.icon_over');

        if (entry.isIntersecting) {
            Content.classList.remove('icon_over-hide');
            Content.classList.add('icon_over-toggle');
            
            const handleTransitionEnd = () => {
                Content.classList.add('icon_over-hide');
                Content.removeEventListener('transitionend', handleTransitionEnd);
            };
            Content.addEventListener('transitionend', handleTransitionEnd);
            return;
        }
        Content.classList.remove('icon_over-toggle');
        Content.classList.remove('icon_over-hide');
    });
});

Title_Description.observe(document.querySelector('#box_table'));

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