Question

当特定的a出现在窗口中间时，我正在尝试将div的颜色从天蓝色更改为黄色。我一直在建立自己的逻辑，当我缓慢地上下滚动页面时，它可以正常工作。但是当我快速滚动页面时它不起作用。我插入了一个按钮，该按钮将页面从100个div移至第四个div（框-5）。当第四个div出现时，背景色不切换，我一直在上下滚动，以更改第四个背景色的逻辑。该按钮位于页面底部。

因此，无论页面快速滚动如何，当div处于窗口中或经过窗口中间时，我都需要帮助以更好的逻辑来更改div的背景色或 OR 变慢直接转移到特定的div。谢谢

div

My index.html:

window.onbeforeunload = function() {
  this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
  current = 0;

for (var y = 0; y < 100; y++) {
  var box = document.createElement("div");
  box.id = "box";
  box.innerHTML = "Box - " + (y + 1);
  content.appendChild(box);
}

content.children[current].style.backgroundColor = "yellow";

window.onscroll = function() {
  if (this.oldScroll > this.scrollY) {
    if (current >= 1) {
      var previous_box = content.children[current - 1];
      if ((this.scrollY + this.innerHeight / 2) < previous_box.offsetTop + previous_box.clientHeight) {
        content.children[current].style.backgroundColor = "skyblue";
        current--;
        content.children[current].style.backgroundColor = "yellow";
      }
    }
  } else {
    if (current < 99) {
      var next_box = content.children[current + 1];
      if ((this.scrollY + this.innerHeight / 2) > next_box.offsetTop) {
        content.children[current].style.backgroundColor = "skyblue";
        current++;
        content.children[current].style.backgroundColor = "yellow";
      }
    }
  }
  this.oldScroll = this.scrollY;
}

document.querySelector("button").onclick = function() {
  var y = content.children[4].offsetTop - (content.children[4].clientHeight / 4);
  window.scrollTo(0, y);
};

body {
  margin: 0;
}

#navigation {
  min-width: 620px;
  background-color: blue;
  width: 100%;
  height: 50px;
  z-index: 1;
  position: fixed;
  top: 0;
}

#box {
  position: relative;
  height: 75%;
  width: 100%;
  margin: 15% auto 15% auto;
  color: black;
  background-color: skyblue;
  border: black 1px solid;
  font-size: 50px;
  text-align: center;
}

button {
  margin: 0% auto 15% auto;
  left: 50%;
}

Answer 1

window.onbeforeunload = function() {
  this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
  current = 0;

for (var y = 0; y < 100; y++) {
  var box = document.createElement("div");
  box.id = "box";
  box.innerHTML = "Box - " + (y + 1);
  content.appendChild(box);
}

content.children[current].style.backgroundColor = "yellow";

window.onscroll = function() {
  for(var i=0;i<content.children.length;i++){
     var top = content.children[i]. getBoundingClientRect().top;
     var height = top+content.children[i].clientHeight;
     var halfWindow = window.innerHeight*0.5;
     if(top<halfWindow&&height>halfWindow){
       content.children[i].style.backgroundColor = "skyblue";
     }
     else{
       content.children[i].style.backgroundColor = "yellow";
     }
  }

}

document.querySelector("button").onclick = function() {
  var y = content.children[4].offsetTop - (content.children[4].clientHeight / 4);
  window.scrollTo(0, y);
};

body {
  margin: 0;
}

#navigation {
  min-width: 620px;
  background-color: blue;
  width: 100%;
  height: 50px;
  z-index: 1;
  position: fixed;
  top: 0;
}

#box {
  position: relative;
  height: 75%;
  width: 100%;
  margin: 15% auto 15% auto;
  color: black;
  background-color: skyblue;
  border: black 1px solid;
  font-size: 50px;
  text-align: center;
}

button {
  margin: 0% auto 15% auto;
  left: 50%;
}

<div id="navigation"></div>
<div id="content"></div>
<button>GO TO BOX 5</button>

更改窗口中显示的div的颜色

1 个答案: