前端之家

  1. 首页
  2. 问答

如何使用javascript

• 问答

如果用户没有在特定时间内滚动，我试图使消息出现，然后在用户滚动时使文本淡出。到目前为止，我没有尝试过。

我只在寻找普通的javascript解决方案。

感谢您的帮助。

// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");

function showMsg() {
  scrollText.classname = "show";
}

setTimeout(showMsg,2000);

// make scroll button fadout ---------------

function scrollHide() {
  var scrollText2 = document.querySelector("#scrollMsg.show");
  var scrllTPosition = scrollText2.getBoundingClientRect().top;
  var screenPosition = window.innerHeight / 0.5;
  if (scrllTPosition < screenPosition) {
    scrollText2.classList.add("scrollHide");
  }
}
window.addEventListener("scroll",scrollHide);
#scrollMsg {
  height: auto;
  position: sticky;
  bottom: 175px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

#scrollMsg.show {
  opacity: 1;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}

#scrollhide {
  opacity: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>

nut0032 回答：如何使用javascript

我添加了一些大的div，以使我们可以滚动浏览文档。

// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");


window.addEventListener('scroll',(e) => {
  console.log('user scrolled!')
  scrollText.style.opacity = 0
});
#scrollMsg {
  opacity: 1;
  transition: opacity 1s; 
}
<div style="height:100px"></div>

<p id="scrollMsg">scroll</p>

<div style="height:4000px"></div>

addeventlistenerjavascriptscrolltransition
本文链接：https://www.f2er.com/3163303.html

大家都在问