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

Question

I have created a simple scroll hint which disappears by mousedown. My goal is that the hint is only displayed the first time. When I reload the page, it should not be displayed again. Only again when the cache of the web page is cleared.

Is there a simple way to realise it with 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 is yes, but not testing the cache. You can use localStorage — mplungjan, Dec 17 '21 at 11:04
Perhaps wrap in a link and change the color: https://stackoverflow.com/questions/21609835/how-to-hide-a-link-if-it-was-visited — mplungjan, Dec 17 '21 at 11:06

score 1 · Accepted Answer · answered Dec 17 '21 at 11:30

I would use localStorage for that.

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>

I have tested it in Safari, but unfortunately it does not work when I clear the cache — clean-cookie, Dec 17 '21 at 11:48
Does the cache clearing remove cookies though? if does then it may be the alternative way. Setting is somewhat easy `document.cookie = "user=John";`, but the mechanism of getting the specific cookie is bit of a challenge — Alt Zh, Dec 17 '21 at 12:15

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

1 Answers1