Question

当用户滚动到页面的特定部分5秒后，我正在折叠模块（使用Bootstrap）。问题是当您手动单击按钮再次折叠时，此功能仍然会触发，我不希望出现这种情况。

基本上我希望在用户滚动到页面上的特定元素后，此函数只会触发一次。我该怎么做呢？

$(window).on('scroll', function(){
    var scroll = $(window).scrollTop();
    var objectSelect = $('#whatsNextGhost');
    var objectPosition = objectSelect.offset().top;
    var collapseAccordion = function() {
        if (scroll > objectPosition) {
            $('#whatsNextSectionContent').collapse('hide');
        }
    };

    setTimeout(collapseAccordion, 5000);
});

Answer 1

我为你创造了一个小小提琴：

https://jsfiddle.net/1j790jxb/

在滚动时，我只需将某些内容记录到控制台：

$(window).on('scroll',function(){
  console.log('scroll attached');
});

当我按下一个按钮（带有ID按钮）时，我将滚动分开：

$('#button').on('click', function(event){
  $(window).off('scroll');
});

正如你在小提琴中看到的那样：单击按钮后，控制台中不再显示任何内容。

您可能还想看看：命名空间（滚动）事件和requestAnimationFrame：

Answer 2

您必须将窗口分配给变量，以便它将侦听器与您应用它的“窗口”的同一实例脱离，因为如果它在初始化闭包之外，则处理程序位于不同的上下文中。

即：

$window = $('window');

$window.on('scroll', function(){
    var scroll = $window.scrollTop();
    var objectSelect = $('#whatsNextGhost');
    var objectPosition = objectSelect.offset().top;
    var collapseAccordion = function() {
        if (scroll > objectPosition) {
            $('#whatsNextSectionContent').collapse('hide');
        }
    };

    setTimeout(collapseAccordion, 5000);
});

$window.off('scroll') // this goes inside whatever method you are using to remove the listener.

编辑：语法

取消绑定滚动功能

2 个答案: