我在我的WordPress站点上写了一个脚本，这样用户就会注意到表格溢出了。
代码的工作原理：用户通过滚动页面到达所需的表。此处指针图标从右向左移动。
我写的脚本代码工作正常，我唯一的问题是，我不知道如何隐藏指针图标后，向左。

**总结：**指针图标移到左侧后，它将被隐藏。

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

        if (entry.isIntersecting) {
            Content.classList.add('icon_over-toggle');
            return;
        }
        Content.classList.remove('icon_over-toggle');
    });
});

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

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;
}

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

.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;
}

<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="jquery-3.4.1.min.js"></script>
        <script src="script.js"></script>

    </div>