ScrollSpy skips short sections

[yosefw]

Update: fixed linting issues

Demo: http://jsbin.com/fomona/2/edit

When scrolling through the page, the affix scrollspy highlights (assigns ".active") the corresponding

, except for the second last, which it skips (#cat-ipsum in the demo).

I found out that it's a combination of the section's height and position. It works fine when it's...

• longer - http://jsbin.com/vatafi/3/edit
• higher in the page - http://jsbin.com/yidiwi/3/edit

Is there a way to solve this without changing the short section's content or position?

[kkirsche]

Works fine for me in the problem demo if you go slowly. See this video:

https://www.youtube.com/watch?v=gMPX2zttfbo at the 16 second mark you can see it picks it up (may be a min or two before youtube finishes processing it)

[yosefw]

@kkirsche This is because the large JSBin header makes the body really short and the scroll spy more accurate. If you dismiss it, you'll see the problem.

[cvrebert]

X-Ref: http://stackoverflow.com/questions/28300129/bootstrap-affix-skips-short-sections

[kkirsche]

Still not able to duplicate it @yosefw on Chrome on a Retina Macbook.

Video of results on my machine (area in question at 13 seconds approx.):
https://www.youtube.com/watch?v=o_NryJ3EHWc

@cvrebert can you duplicate it?

[yosefw]

@kkirsche Not sure what to say. I duplicated the problem both in Firefox and Chrome, on Mac and Windows, with screen resolutions 1680x1050 and 1920x1080

[kkirsche]

I wonder if it is due to being a Retina display at 2560-by-1600 resolution that I can't

[cvrebert]

I can occasionally reproduce this, although it seems to go away when I try to debug it...

[fat]

It happens when you reach the end of the document, and both are in view… scrollspy tries to be smart and auto highlight the last item (https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js#L88)

we could remove this behavior – but it seems pretty deliberate, and I'd hate to get in an infinite loop with this.

What is the expected behavior for you?

[yosefw]

@fat Obviously I was expecting each item to light up as I scroll down the page. This override for the end of the page does make some sense, but it's still confusing from a user perspective (I think).

I suggest the following compromise:

• Add a note to the documentation that if the last sections are too short, they won't get highlighted properly when the user gets to the end of the page.
• Fix the affix behavior to highlight any item the user clicked, even if it's within the viewport with the bottom of the page.

How does that sound?

[planting]

@yosefw +1 For this:

Fix the affix behavior to highlight any item the user clicked, even if it's within the viewport with the bottom of the page

[AChen0102]

Agreed

[julkue]

I just want to give you another example. See the navigation on the left side:
https://markjs.io/
Issues:

• When scrolling down the page, the item "5. Compatibility" will never be highlighted, as it's too short (that's fine, as I know the background)
• However, when scrolling down the page on iPad, "4.3 ..." will be highlighted. This is not as expected because at least the last item should be highlighted when scrolled to the total bottom.
• When clicking on e.g. "6. Contribute" I expect this item to be highlighted, even if there are other items in the viewport, as this is what I just clicked on! Currently, clicks will not cause a different highlighting.

[cvrebert]

Perhaps we should highlight all onscreen items instead of just one of them. That would sidestep these issues.

[julkue]

@cvrebert That would be a solution, but from a usability point of view I think this would confuse users. Imagine this behavior on a page like components with less content. This would cause multiple dropdowns to be expanded and highlighted, which would be

• confusing
• may expand so much items that there will be a viewport overflow (which is not covered -- you can test this by simply resizing your window vertically to a small height on that page). Screen:
  

[julkue]

One more issue:

• When scrolling with smooth scroll using jQuery's .animate() function, scrollSpy will still highlight all items while scrolling. This is a problem when having nested submenus like on the components page that will be shown when they are active. There is no way to persist the state while scrolling, as this solution does not work (anymore)

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team