jquery 仅在滚动时触发一次功能

mqxuamgl 于 2023-06-29 发布在 jQuery

关注(0)|答案(5)|浏览(138)

我想在div滚动到视口时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。
HTML：

<div class="box"></div>

JS：

$(document).ready(function() {

    function start() {
        alert("hello");
    }

    $(window).scroll(function() {
      if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
        $(".box").addClass("green");
        start();
      } else {
        $(".box").removeClass("green");
      }
    });
  });

总而言之：当div滚动到viewport时，应该启动函数“start”。但它应该不会再被触发，在它被触发一次之后。
Fiddle

jquery

来源：https://stackoverflow.com/questions/57961574/trigger-function-only-once-on-scroll

5条答案

按热度按时间

x0fgdtte1#

您可以设置一个标志，如：

var started = false;
function start() {
  if(!started) {
    alert("hello");
  }
  started = true;
}

赞(0）回复(0）举报 2023-06-29

tkclm6bt2#

$(document).ready(function() {
  	
    var started = 0;
function start() {
  if(started==0) {
    alert("Alert only once");
  }
  started = 1;
}
  
    $(window).scroll(function() {
      if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
        $(".box").addClass("green");
        start();
      } else {
      	$(".box").removeClass("green");
      }
    });
  });

*{margin:0;}
.box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; }
.green { background: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<br />

<center>
    
  <br />
  <h1>scroll down</h1>
  </center>

<div class="box"></div>

赞(0）回复(0）举报 2023-06-29

cig3rfwq3#

有很多方法可以解决这个问题。你可以只删除事件监听器（因为你使用的是jQuery，我将使用on和off方法）：

$(window).on('scroll', function() {
  if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
    $(".box").addClass("green");
    start();
  } else {
    $(".box").removeClass("green");
  }
  $(window).off('scroll');
});

赞(0）回复(0）举报 2023-06-29

kcugc4gi4#

如果你想让窗口滚动方法在启动方法满足其要求后停止..你可以这样做

$(document).ready(function() {

  var toggleScroll = false;

    function start() {
        alert("hello");
    }

    $(window).one("scroll", checkToggleScroll);

    function checkToggleScroll(){

        if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
          $(".box").addClass("green");
          toggleScroll = true;
          start();
        } else {
          $(".box").removeClass("green");
        }

        if(!toggleScroll){
          $(window).one("scroll", checkToggleScroll);
        }
    }

  });

赞(0）回复(0）举报 2023-06-29

x3naxklr5#

当$(".box)没有类"green"（在一定量的滚动后添加）时，只需运行start()函数。

$(document).ready(function() {

  function start() {
    alert("hello");
  }

  $(window).scroll(function() {
    if ($(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
      if (!$(".box").hasClass("green")) {
        $(".box").addClass("green");
        start();
      }
    } else {
      $(".box").removeClass("green");
    }
  });
});

.box {
  background: red;
  height: 200px;
  width: 100%;
  margin: 800px 0 800px 0;
}

.green {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 仅在滚动时触发一次功能

5条答案

相关问题

热门标签

最新问答