スクロールエリアのアテンション

アクションで非表示

スクロールエリアでスクロールアクションをしたら消える

HTML

<div id="table01">
  <div class="inner">
    <div class="yoko"></div>
    <div class="tate">v01</div>
        ・・・ 中略 ・・・
    <div class="yoko">TypeA</div>
    <div>A-2</div>
        ・・・
    <div class="yoko">TypeB</div>
        ・・・
    <div class="yoko">TypeC</div>
        ・・・
    <div class="yoko">TypeD</div>
        ・・・
    <div class="yoko">TypeE</div>
        ・・・
  </div>
</div>
<div id="scroll-container"><p>scroll</p></div>

CSS

#table01 {
  width: min(800px, 90vw);
  padding: 1px;
  overflow: scroll;
  height: 400px;
  & .inner {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(11, auto);
    width: max-content;
    & div {
      outline: 1px solid #aaa;
      outline-offset: 0;
      background-color: #fff;
      padding: 1em;
      display: grid;
      justify-content: center;
      width: 200px;
      @media (48em >= width) {
        width: 20vw;
      }
      &.tate {
        background-color: #ccc;
        position: sticky;
        left: 0;
        z-index: 2;
      }
      &.yoko:not(:nth-child(1)) {
        background-color: #dfe4e9;
        position: sticky;
        top: 0;
        z-index: 2;
      }
      &:first-child {
        background-color: #fff;
        background-image: linear-gradient(to top right, transparent calc(50% - 1px), #aaa, transparent calc(50% + 1px));
        position: sticky;
        top: 0;
        left: 0;
        z-index: 3;
      }
    }
  }
}
// 消えるアテンション
#scroll-container {
  position: relative;
  margin: -12em auto 0;
  outline: 1px solid #2a65a1;
  background-color: #fff;
  padding: 0.5em 1em;
  line-height: 1;
  width: fit-content;
  text-align: center;
  left: 120px;
  transition: opacity 0.4s ease-in-out;
  @media (48em >= width) {
    left: 13vw;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    background: #2a65a1;
    height: 13px;
    width: 9px;
    clip-path: polygon(0 10%, 10% 0, 100% 50%, 10% 100%, 0 90%, 70% 50%);
    top: -1em;
    left: 50%;
    translate: -50% 0;
    rotate: -90deg;
  }
  &::after {
    top: inherit;
    bottom: -1em;
    rotate: 90deg;
  }
  & p {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    &::before,
    &::after {
      content: "";
      position: absolute;
      background: #2a65a1;
      height: 13px;
      width: 9px;
      clip-path: polygon(0 10%, 10% 0, 100% 50%, 10% 100%, 0 90%, 70% 50%);
      top: 50%;
      left: -2em;
      translate: 0 -50%;
      rotate: 180deg;
    }
    &::after {
      left: inherit;
      right: -2em;
      rotate: 360deg;
    }
  }
}

JS

const target = document.getElementById("scroll-container");
const container = document.getElementById("table01");
container.addEventListener("scroll", () => {
  const isScrolled = container.scrollTop > 10 || container.scrollLeft > 10;
    if (isScrolled) {
      target.style.opacity = "0";
      target.style.pointerEvents = "none";
    }
});

animation後非表示

親要素をスクロールして該当のスクロールエリアが表示したらanimationで注意を向けて消える

HTML

<div id="table02">
  <div class="inner">
    <div class="yoko"></div>
    <div class="tate">v01</div>
        ・・・ 中略 ・・・
    <div class="yoko">TypeA</div>
    <div>A-2</div>
        ・・・
    <div class="yoko">TypeB</div>
        ・・・
    <div class="yoko">TypeC</div>
        ・・・
    <div class="yoko">TypeD</div>
        ・・・
    <div class="yoko">TypeE</div>
        ・・・
    <div class="target-element"><p>scroll</p></div>
  </div>
</div>

CSS

tableは上記と同じ

// 消えるアテンション
.target-element {
  position: relative;
  margin-top: -420px;
  background-color: #2a65a1;
  color: #fff;
  padding: 0.5em 1em;
  line-height: 1;
  width: fit-content;
  text-align: center;
  left: 500px;
  opacity: 0;
  transition: opacity 0.5s;
  @media (48em >= width) {
    left: 40vw;
    z-index: 3;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    background: #2a65a1;
    height: 13px;
    width: 9px;
    clip-path: polygon(0 10%, 10% 0, 100% 50%, 10% 100%, 0 90%, 70% 50%);
    top: -1em;
    left: 50%;
    translate: -50% 0;
    rotate: -90deg;
  }
  &::after {
    top: inherit;
    bottom: -1em;
    rotate: 90deg;
  }
  & p {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    &::before,
    &::after {
      content: "";
      position: absolute;
      background: #2a65a1;
      height: 13px;
      width: 9px;
      clip-path: polygon(0 10%, 10% 0, 100% 50%, 10% 100%, 0 90%, 70% 50%);
      top: 50%;
      left: -2em;
      translate: 0 -50%;
      rotate: 180deg;
    }
    &::after {
      left: inherit;
      right: -2em;
      rotate: 360deg;
    }
  }
}
.flash-animate {
  animation: flash 0.8s linear 3;
  opacity: 1;
}
.fade-out {
  opacity: 0 !important;
  visibility: hidden;
  transition:
    opacity 0.5s,
    visibility 0.5s;
}
@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

JS

document.addEventListener("DOMContentLoaded", () => {
  const target = document.querySelector(".target-element");

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 画面に入ったらアニメーションクラスを追加
          target.classList.add("flash-animate");
          setTimeout(() => {
            target.classList.add("fade-out");
          }, 4000);
        }
      });
    },
    {
      threshold: 0.5, // 要素の50%が見えたら発火
    },
  );
  observer.observe(target);
});

スクロールバーを表示する

スクロールエリアにスクロールバーを表示する

CSS

tableは上記と同じ

#table03 {
  width: min(800px, 90vw);
  margin-inline: auto;
  padding: 1px 6px 6px 1px;
  height: 400px;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: block; /* 表示を強制 */
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
  }
  &::-webkit-scrollbar-thumb {
    background-color: #888; /* スクロールバーの色 */
  }
  &::-webkit-scrollbar-track {
    background: #daefef; /* 背景色 */
  }
  &::-webkit-scrollbar-corner {
    background-color: #b1cece;　/* 右下スクロールバーの間の色 */
  }
 ・・・ 省略 ・・・
}