Question

上下文我有一个导航栏，触发主内容容器上的scrollTo函数滚动到相应的部分。我使用 jscrollpane 插件在这个容器上有一个纯javascript滚动条。它允许我访问一个自定义事件“jsp-scroll-y”，该事件监听鼠标滚动事件到容器中的给定位置。

我的导航栏上还有一些动画，在显示其部分时为导航栏选项卡着色。 问题：我想实现一个滚动间谍，这样当滚动条在某个范围内时，它会告诉我显示哪个部分，我想为相应的导航栏选项卡设置动画。但是，当通过单击导航栏选项卡之一进行滚动时，我不希望此动画工作，因为如果我从第一个元素开始滚动到最后一个元素，它将为两个元素设置动画，因为scrollspy将检测到我们通过了通过每个部分。

我的解决方案不起作用：我放了一些我认为相关的代码和伪代码，但如果需要，我可以提供完整的代码。

可能的解释：从一些调查来看，问题似乎是因为scrollTo方法是动画的，因此需要一些时间来完成，但代码继续进行并重新连接动画实际完成前的scroll-spy事件。我想这意味着我必须找到一种方法来完成scrollTo动画，之后我可以重新连接事件处理程序。

     function navbarclickEvent(navbarElement, navbarId){

      //detach scrollspy from jspPane, reattach after scrollTo to prevent switching through           all sections.
      scrollbar.off('jsp-scroll-y');

      // navbar animation logic

      //scrolling to sections

      scrollbar.on('jsp-scroll-y');
      return false;
   }

function scrollspy(event, scrollPositionY, isAtTop, isAtBottom){
    //logic to animate proper navbar tab depending on section displayed
}
scrollbar.bind('jsp-scroll-y',scrollspy); // in main code.

Answer 1

如果您知道要禁用哪个功能，可以使用unbind。

重新使用您的代码：

function navbarclickEvent(navbarElement, navbarId){
  scrollbar.unbind('jsp-scroll-y', scrollspy);

  // navbar animation logic
  //scrolling to sections

  scrollbar.bind('jsp-scroll-y', scrollspy);
  return false;
}

function scrollspy(event, scrollPositionY, isAtTop, isAtBottom){
  //logic to animate proper navbar tab depending on section displayed
}

scrollbar.bind('jsp-scroll-y', scrollspy); // in main code.

Answer 2

我的第一个猜测是正确的。我的问题是竞争条件，在我们重新激活scrollspy之后滚动事件将完成，这意味着它永远不会真正关闭。我通过扩展默认的animate方法并在complete事件上添加回调，使用jscrollPane API的强大功能解决了这个问题。这样，通过将全局变量设置为false并通过完整回调重新激活它，我确保当我使用导航栏滚动时我的scrollspy不会触发，但是当我使用鼠标或键盘时它将会触发。

// global 
isScrollSpyEnabled = true;
var customAnimate = function (ele, prop, value, stepCallback) {

      var params = {};

      params[prop] = value;

      ele.animate(

         params,

         {

            'duration'  : Config.scrollSettings.animateDuration,

            'easing' : Config.scrollSettings.animateEase,

            'queue'     : false,

            'step'      : stepCallback,

            'complete'  : toggleScrollSpy

         }

      );

   }

 function toggleScrollSpy(){

      isScrollSpyEnabled = !isScrollSpyEnabled;

      console.log('isScrollSpyEnabled',isScrollSpyEnabled);

   }

主

中的

 scrollbar.bind('jsp-scroll-y',scrollspy);

  api = scrollbar.data('jsp');

  api.animate = customAnimate;

在函数运行时暂时禁用jQuery事件处理程序

2 个答案: