Javascript jQuery-仅当存在特定元素时才侦听滚动

我只想在显示类名为scroll_button的按钮时收听scroll事件。我想节省资源。我怎样才能做到呢

JS

HTML

试试这个代码

$(window).scroll(function(){
  if( $('.scroll_button').css('display') != 'none' )
  {
    //do something
  }
});

---

这是不可能的。不能使作用于大于子元素的元素的事件侦听器依赖于子元素

但您可以收听所有滚动事件，并在回调检查中查看按钮的显示状态，如下所示：

---

根据注释，由于按钮的可见性由另一个按钮控制，因此可以执行以下操作：

$("#change").click(function () { // button that controls visibility

  $(".scroll_button").toggle(0, function () { 
    if ($(".scroll_button").is(':visible')) {
        $(window).on("scroll", function (e) { // listen to scroll
            console.log("scolling");
        });
    } else {
        $(window).off("scroll"); // stop listening to scroll
    }
  });

});

---

只是一个小小的解决办法：为什么不总是听滚动，并最终采取行动，如果按钮显示？你没有控制的代码，改变按钮的显示…？@TJ它出现后，用户点击另一个按钮，但这样它将始终听滚动，即使它不是needed@user2952265这是正确的，先生。但不幸的是，使用jQuery或纯Javascript是不可能的，但这样它将始终侦听scroll，即使不需要它

$(window).scroll(function(){
  if( $('.scroll_button').css('display') != 'none' )
  {
    //do something
  }
});

$(window).scroll(function(e){
    if($(".scroll-button").is(':visible')) {
        console.log("business logic");
    };
});

$("#change").click(function () { // button that controls visibility

  $(".scroll_button").toggle(0, function () { 
    if ($(".scroll_button").is(':visible')) {
        $(window).on("scroll", function (e) { // listen to scroll
            console.log("scolling");
        });
    } else {
        $(window).off("scroll"); // stop listening to scroll
    }
  });

});