Home Moving the indicator icon to show the overflow of the table to the user with JavaScript

Questions

Moving the indicator icon to show the overflow of the table to the user with JavaScript

March 10, 2023

I wrote a script on my WordPress site so that the user will notice that the table is overflowing.

How the code works:
The user reaches the desired table by scrolling the page. Here the pointer icon moves from right to left.

The script code I wrote works fine and the only problem I have is that I don’t know how to hide the pointer icon after going left.

In summary:
After the pointer icon goes to the left, it will be hidden.

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>

>Solution :

Pure CSS:

.icon_over-toggle {
  animation: disappear 0.5s ease-in-out;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

Source: MDN: animation-fill-mode

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;
  animation: disappear 0.5s ease-in-out;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

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

@keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}

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