javascript - Twitter bootstrap scrollspy - disable on smooth scroll? - Stack Overflow

admin管理员组

文章数量:1361992

We are using the twitter bootstrap scrollspy on a sidebar ul/il list, this works great. We do however also use smooth scrolling when clicking the links in the sidebar. This causes the scrollspy to highlight each and every element that es into view, as it should in normal cases.

But when the scrolling is triggered by a click on the links in the side nav, the users most likely don't expect the menu to animate as the scrolling occurs. Is there any way to temporarily disable the scrollspy while the animated scroll is running, and then reenable it once scrolling is plete?

We are using the twitter bootstrap scrollspy on a sidebar ul/il list, this works great. We do however also use smooth scrolling when clicking the links in the sidebar. This causes the scrollspy to highlight each and every element that es into view, as it should in normal cases.

But when the scrolling is triggered by a click on the links in the side nav, the users most likely don't expect the menu to animate as the scrolling occurs. Is there any way to temporarily disable the scrollspy while the animated scroll is running, and then reenable it once scrolling is plete?

• javascript
• twitter-bootstrap
• html-lists
• twitter-bootstrap-3
• scrollspy

Share Improve this question Follow edited Sep 19, 2013 at 9:46 Anshad Vattapoyil 23.5k1919 gold badges9090 silver badges134134 bronze badges asked Sep 19, 2013 at 9:36 Roger JohanssonRoger Johansson 23.2k1818 gold badges104104 silver badges204204 bronze badges 4

• Have you tried removing the data-spy attribute temporarily (assuming you are using data-)? – JofryHS Commented Sep 19, 2013 at 10:48
• I'm using javascript to activate it – Roger Johansson Commented Sep 19, 2013 at 10:54
• 2 In that case, try setting a class as data-target, remove the class as the scrolling animation is running, and re-insert the class after animation is done? $('body').scrollspy({ target: '.spy-active' }); – JofryHS Commented Sep 19, 2013 at 11:00
• that works like a charm.. make an answer of it and Ill mark it – Roger Johansson Commented Sep 19, 2013 at 12:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

By setting a class as the target of scrollspy you can dynamically stop/resume scrollspy operation.

$('body').scrollspy({ target: '.spy-active' });

Now one will just need to add or remove the .spy-active class on the navigation.

add the following to the top of your local javascript...

$.fn.scrollspy.Constructor.prototype.destroy = function(){
    this.$element.off('scroll.bs.scroll-spy.data-api');
    this.$body.removeData('bs.scrollspy');
    return this.$body;
}

本文标签： javascriptTwitter bootstrap scrollspydisable on smooth scrollStack Overflow