Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollspy selecting the last element when at the bottom of the page #18804

Closed
wants to merge 3 commits into from
Closed

Scrollspy selecting the last element when at the bottom of the page #18804

wants to merge 3 commits into from

Conversation

gurisko
Copy link

@gurisko gurisko commented Jan 8, 2016

Fixes #17739

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 8, 2016

Please add a relevant JS unit test or visual test for your change; see https://github.com/twbs/bootstrap/tree/v4-dev/js/tests for instructions.

@@ -212,6 +217,7 @@ const ScrollSpy = (($) => {
if (this._activeTarget !== target) {
this._activate(target)
}
return
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because there is a case when scrollTop is lower than offset of the last target and there is no more space to scroll down in this._scrollElement. In this case this._activeTarget would get overwritten to the last but one target in line 235 if there is no return statement in this line.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, sorry, I was on mobile and it looked like this was already the end of the function (obviously it's not).

@gurisko
Copy link
Author

gurisko commented Jan 29, 2016

@cvrebert is the visual test enough for now?

@@ -28,6 +28,7 @@
<a class="dropdown-item" href="#three" tabindex="-1">three</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#four">@four</a></li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this to something like "Selected when page scrolled to bottom", so as to explicitly give the test expectation.

@timfish
Copy link

timfish commented Mar 1, 2016

What's left to do before this can be merged in?

@gurisko
Copy link
Author

gurisko commented Apr 20, 2016

All comments should be implemented.

@timfish Sorry, I missed the notifications. I believe nothing is left to do before the merge anymore.

@cvrebert
Copy link
Collaborator

So, this has the side-effect of making the unselectability of middle items on the last screen noticeable. Which also feels weird from a user perspective. Here's an example:
kobayashi-maru

Notice how "2nd to last" is unreachable.

I'm not sure how we ought to handle that.
CC: @patrickhlauke @XhmikosR @hnrch02 @mdo for thoughts

@timfish
Copy link

timfish commented Apr 21, 2016

Still slightly strange behaviour but not sure how else it should work and doesn't actually appear to be a regression from v3:
#15729

@hnrch02
Copy link
Collaborator

hnrch02 commented Apr 21, 2016

That's a though UX decision—I'm not sure about this either. But this PR restores the original behavior from v2 and v3 so I'd say 👍 .

@mdo
Copy link
Member

mdo commented Nov 26, 2016

Super strange, but this is now in v4-dev and didn't get auto-closed. Might be something to do with the fork being deleted (as it says unknown repository up top).

Relevant commits on our end are 39d7861 and d328c91.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants