Question

我试图创建一个网站，根据用户滚动页面的距离来触发不同的事件。

到目前为止，我一直使用的逻辑是通过一系列if语句来检查用户所在页面的距离：

window.onscroll = function(ev) {

if(window.innerHeight + window.scrollY >= <insert value or reference here>) 
{
     <enter code here>
}
...

我认为把它写成switch语句会更方便：

switch(window.innerHeight + window.scrollY)
{
    case (<insert value or reference here>):
        <enter code here>
        break;
        ...
}

但由于某种原因，它作为if语句触发但不作为switch语句触发。谁能帮我理解为什么？我还想知道是否有更有效的方法，或者欢迎提出任何建议。

谢谢！

Answer 1

由于您在>=语句中if进行比较而switch为==，因此无效。如果你想要一个switch语句，它应该如下所示：

switch(true){
  case (window.innerHeight + window.scrollY >= <insert value or reference here>) :
      ....
      break;
}

表达式应始终评估为true或false。

Answer 2

＆＃13;

$("#block1").hover(
  function() {
    $("#loc").text("mouse scrolled to block 1");
  }, function() {
    $("#loc").text("");
  }
);


$("#block2").hover(
  function() {
    $("#loc").text("mouse scrolled to block 2");
  }, function() {
    $("#loc").text("");
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="loc" style=" position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;background-color:green;text-align:center ">xxx</div>
<div style="height:500px; background-color:grey">this is long content. it requires you to scroll to see it all</div>
<div id="block1" style="height:  250px; background-color:pink;">this is a block of comment. you got here by entering the block</div>
<div id="block2" style="height:  350px; background-color:yellow;">this is a block of comment. you got here by entering the block</div>

＆＃13;

我还想知道是否有更有效的方法这个或任何建议也欢迎。

我建议将内容放入DIV，然后使用jQuery，根据该事件触发mouseover / mouseout事件。

switch语句滚动值（Javascript）

2 个答案: