当没有更多可滚动区域时，Bootstrap ScrollSpy会跳过该部分 [英] Bootstrap ScrollSpy skips section when no more scrollable area

问题描述

关于所选元素的滚动位置，我对Bootstrap ScrollSpy遇到问题.问题出现在页面底部，我在整个页面中有多个相对较短的内容部分.它们被折叠并展开onClick，(是的，如果我选择将其全部打开，则似乎没有问题)，并且当我到达页面底部之前，通过scrollspy选择所有页面时，它会跳转到导航上的最后一个元素.

I am having an issue with Bootstrap ScrollSpy in regards to the scrolling position of a selected element. The issue occurs at the bottom of the page, I have multiple relatively short sections of content through out the page. They are collapsed and expand onClick, (so yes, if I choose to have all open then there seem to be no problem) and when I reach the bottom of page before all have been selected by scrollspy it jumps to the last element on nav.

似乎没有更多可滚动区域了. (也不能添加额外的空白填充来终止设计)

It seems to be a issue with no more scrollable area. (Also adding extra white space padding to kill design is not an option)

我已经向主体添加了scrollspy，我的主体没有添加高度值，offset没有任何影响，而是要尽早开始突出显示元素.

I have added scrollspy to body, my body has no height values added, offset has no effect other then starting the highlighted element was to early.

这是我的代码的JSFiddle: http://jsfiddle.net/Abuu/sAUee/

Here is a JSFiddle of my code: http://jsfiddle.net/Abuu/sAUee/

    $( document ).ready(function() {
    $('body').scrollspy({ 'target': '#nav', 'offset': 10 });
});

我在So上只发现了一个类似的问题，但尚未得到回答: Bootstrap-Scrollspy滚动跳过倒数第二个

I have only found one similar question here on So, but it has not been answered: Bootstrap - Scrollspy scrolling skipping second to last section

谢谢.

推荐答案

当部分的大小不足以占据显示空间时，会发生这种情况，因此，当页面上同时有几个部分都位于页面上时，ScrollSpy默认设置为最后一节.从我所看到的情况来看，这仅在页面的最后几节发生.

This occurs when sections aren't large enough to take up the display space, so when a few sections are all on the page at the same time ScrollSpy defaults to the last section. From what I've seen this only happens with the last sections on a page.

如果您在占用屏幕的每个区域中增加一个高度，您会发现它可以正常工作.

If you add a height to each section that takes up the screens real-estate you'll see that it works as it should.

这篇关于当没有更多可滚动区域时，Bootstrap ScrollSpy会跳过该部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！