javascript 是否有可能仅在第一个页面加载时显示滚动提示？

Question

我创建了一个简单的滚动提示，它会通过按下鼠标消失。我的目标是提示仅在第一次显示。当我重新加载页面时，它不应该再次显示。只有在清除网页缓存后才会重新出现。

有没有简单的实现方法javascript？

function hideHint() {
  document.getElementById("scroll-hint").style.display = "none";
}

body {
  margin: 0;
}

#content {
  background-color: orange;
  height: 100vh;
  width: 100vw;
}

#scroll-hint {
  background-color: gray;
  border-style: solid;
  height: 20vh;
  width: 20vw;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 40%;
}

.mouse {
  display: block;
  width: 23px;
  height: 40px;
  border-radius: 13px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  margin: 0 auto 0 -14px;
  background-color: white;
}

span {
  display: block;
  margin: 6px auto;
  width: 3px;
  height: 7px;
  border-radius: 100%;
  background: blue;
}

<div id="content" onmousedown="hideHint()">
  <div id="scroll-hint">
    <div class="mouse">
      <span></span>
    </div>
  </div>
</div>

Answer 1

我会为此使用 localStorage。

function hideHint() { document.getElementById("scroll-hint").style.display = "none"; localStorage.setItem('scrollHint', 'is_seen') }

if(localStorage.getItem("scrollHint"));

function hideHint() {
  document.getElementById("scroll-hint").style.display = "none";
  localStorage.setItem('scroll_hint', true);
}

if (localStorage.getItem('scroll_hint')) {
  document.getElementById("scroll-hint").style.display = "none";
}

body {
  margin: 0;
}

#content {
  background-color: orange;
  height: 100vh;
  width: 100vw;
}

#scroll-hint {
  background-color: gray;
  border-style: solid;
  height: 20vh;
  width: 20vw;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 40%;
}

.mouse {
  display: block;
  width: 23px;
  height: 40px;
  border-radius: 13px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  margin: 0 auto 0 -14px;
  background-color: white;
}

span {
  display: block;
  margin: 6px auto;
  width: 3px;
  height: 7px;
  border-radius: 100%;
  background: blue;
}

<div id="content" onmousedown="hideHint()">
  <div id="scroll-hint">
    <div class="mouse">
      <span></span>
    </div>
  </div>
</div>

javascript 是否有可能仅在第一个页面加载时显示滚动提示？

Is there a possibility with javascript to show a scroll hint only at the first pageload?

html

javascript

css

pageload