0

上下文我有一个导航栏，它触发我的主要内容容器上的 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.
4

2 回答 2

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.
于 2013-06-16T22:19:28.173 回答
0

我的第一个猜测是正确的。我的问题是在我们重新激活 scrollspy 后滚动事件将完成的竞争条件，这意味着它永远不会真正关闭。我使用 jscrollPane API 的强大功能解决了这个问题，方法是扩展默认的 animate 方法并在完整事件上添加回调。这样，通过将全局变量设置为 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;
于 2013-06-17T22:52:09.143 回答