【コピペOK】スクロールヒントを簡単実装！｜応用テクニック5選

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>日付</th>
                <th>イベント名</th>
                <th>開始時間</th>
                <th>終了時間</th>
                <th>場所</th>
                <th>参加者</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>2024/02/10</td><td>会議</td><td>10:00</td><td>11:30</td><td>会議室A</td><td>5名</td><td>資料準備</td></tr>
            <tr><td>2024/02/15</td><td>ランチミーティング</td><td>12:00</td><td>13:00</td><td>カフェB</td><td>3名</td><td>メニュー予約</td></tr>
            <tr><td>2024/02/18</td><td>開発会議</td><td>14:00</td><td>16:00</td><td>オンライン</td><td>10名</td><td>Zoomリンク共有</td></tr>
            <tr><td>2024/02/22</td><td>社内研修</td><td>09:00</td><td>12:00</td><td>セミナールーム</td><td>20名</td><td>プロジェクター使用</td></tr>
            <tr><td>2024/02/25</td><td>クライアントミーティング</td><td>15:00</td><td>17:00</td><td>会議室B</td><td>6名</td><td>契約書準備</td></tr>
        </tbody>
    </table>

    <!-- スクロールヒント -->
    <div class="scroll-indicator">
      <div class="scroll-indicator-inr">
          <div><img src="img_scroll_hint.png" alt="スクロールできます。"></div>
          <div>スクロールできます</div>
      </div>
    </div>
</div>

/* スクロールヒントのスタイル */
.scroll-indicator {
    opacity: 0.7;

    /* absoluteを使用し、スクロールヒントを中央配置 */
    position: absolute;
    left: 50%;
    top: 50%;

    /* クリックを無効化
    スクロールヒントがクリックの邪魔になる可能性があるため */
    pointer-events: none; 

    /* transitionを指定し、ゆっくりと非表示にする */
    transition: opacity 0.3s ,visibility 0.3s;
}

/* スクロールされた後もスクロールヒントが残っていると邪魔なため、
ある程度スクロールされたら非表示にする */
.scroll-indicator.is-scroll {
    visibility: hidden;
    opacity: 0;
}

.scroll-indicator-inr {
    font-size: 12px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeBlink 2s infinite ease-in-out;
}

.scroll-indicator-inr img {
    width: 50px;
}

/* スクロールヒントの点滅アニメーション */
@keyframes fadeBlink {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

document.addEventListener("DOMContentLoaded", function () {

    // スクロールさせる親要素
    const tableContainer = document.querySelector(".table-container");

    // スクロールヒント
    const hint = document.querySelector(".scroll-indicator");

    tableContainer.addEventListener("scroll", function () {

        // 横方向に10px以上スクロールしたらクラスを付与
        if (tableContainer.scrollLeft > 10) {
            hint.classList.add("is-scroll");
        }
    });
});

.scroll-indicator {
    display: none;
}

@media (max-width: 600px) {
    .scroll-indicator {
        display: block;
    }
}

document.addEventListener("DOMContentLoaded", function () {
    const hint = document.querySelector(".scroll-indicator");

    // 5秒後に自動で消す
    setTimeout(() => hint.classList.add("is-scroll"), 5000);
});

document.addEventListener("DOMContentLoaded", function () {
    const tableContainer = document.querySelector(".table-container");
    const hint = document.querySelector(".scroll-indicator");

    // スクロールが必要な場合のみヒントを表示
    if (tableContainer.scrollWidth > tableContainer.clientWidth) {
        hint.style.display = "block";
    }
});

document.addEventListener("DOMContentLoaded", function () {
    const tableContainer = document.querySelector(".table-container");
    const hint = document.querySelector(".scroll-indicator");

    tableContainer.addEventListener("scroll", function () {
        if (tableContainer.scrollLeft > 10) {
            hint.classList.add("is-scroll"); // スクロール開始で非表示
        } else if (tableContainer.scrollLeft === 0) {
            hint.classList.remove("is-scroll"); // 左端に戻ったら再表示
        }
    });
});

pointer-events: none; /* クリックを無効化 */

document.addEventListener("DOMContentLoaded", function () {
    const hint = document.querySelector(".scroll-indicator");

    hint.addEventListener("click", function () {
        hint.classList.add("is-scroll");
    });
});