He creado una sugerencia de desplazamiento simple que desaparece al presionar el mouse. Mi objetivo es que la pista solo se muestre la primera vez. Cuando recargo la página, no debería volver a mostrarse. Solo de nuevo cuando se borra el caché de la página web.
¿Hay una manera simple de realizarlo con 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>Usaría localStorage para eso.
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>