Question

我的HTML中有四个div。

<html>
<body>
   <div id="div1">aaaaa</div>
   <div id="div2">bbbb</div>
   <div id="div3">cccc</div>
   <div id="div4">dddd</div>
</body>
</html>

当用户开始滚动页面时，无论他看到哪个div，它都应该提醒或显示特定的div id。示例：当他看到内容aaaa时，它应该显示或警告div1。

这必须仅使用JavaScript来完成。

Answer 1

你的答案的JS版本：

当您向下滚动到第二个div（橙色背景色）

时，这会给您一个提醒

＆＃13;

window.onscroll = function() {
    var elem = document.getElementById("div2");
    var hT = elem.offsetTop,
        hH = getAbsoluteHeight(elem),
        wH = window.innerHeight,
        wS = window.pageYOffset;
    if (wS > (hT+hH-wH)){
        alert('you have scrolled to the Div2!');
    }
}

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
           parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

＆＃13;

div {
  width: 100%;
  height: 500px;
  background-color: tomato;
}

#div2 {
  background-color:orange;
}

＆＃13;

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

＆＃13;

希望这会有所帮助：）

当用户滚动到特定div时，使用JavaScript警告div id

1 个答案: