使用 scrollto jquery 插件时是否需要绑定/取消绑定滚动事件？

Question

我正在创建一个水平滚动站点。每次单击菜单链接时，我都会使用 scrollto 滚动到所选部分，但是当我使用滚动而不是链接滚动到某个部分时，它会打乱导航样式. 我认为问题是我在滚动事件中有代码并且滚动到它也触发滚动事件¿？

我想要实现的是在以下情况下突出显示导航菜单中的当前链接： 1）我点击它 2）我使用浏览器滚动条手动滚动到一个部分 3）我点击下一个/上一个链接

可能问题出在这部分：

var position = Math.abs( $('#slider ul').offset().left - 138 );
$('p.status').html( 'index:' + getCurrentSectionIndex(position) );

//disable the scroll event so it doesn't broke the flow
$('#slider').unbind('scroll',handler);

//scrolls to the selected section
$('#slider').scrollTo($('#' + $(this).attr('class')), 800, { axis: 'x' });

//enable again the scroll event
//$('#slider').bind('scroll',handler);
var timeout = setTimeout(function() {
    $('#slider').bind('scroll',handler);
}, 3000);

我是 jquery 的新手，所以如果您发现任何可以改进的地方，请告诉我。欢迎任何建议 :)

我不知道我是否解释得很好所以这是代码jsfiddle

我正在使用question中的一些代码

Answer 1

嗯，我为你的代码做了一个“更简单”的版本，它看起来就像你想要的那样工作。

Click here to see the jsfiddle live demo

一些更新是：

一个变量index接收当前项的索引。

根据index，使用eq:()选择器会高亮对应的导航项os，我也是用同样的方法滚动页面。

并且我使用ScrollTo插件的回调（onAfter）再次绑定滚动事件：

$('#slider').scrollTo('ul li:eq(' + index + ')', 800, {
    axis: 'x',
    onAfter: function() {
        $('#slider').bind('scroll', handler);
    }
});

我有任何疑问！