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 beta 4 active state trigger points #23809

Open
DannyJoris opened this issue Sep 2, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@DannyJoris
Copy link

commented Sep 2, 2017

I'm confused on some of the behaviour of Scrollspy, and at this point I'm not sure if it's a bug or something I did wrong.

When the scrollable element is not the default window, the offset to the page top still affects when the nav links get set to active. Note that the navigation isn't fixed position, the navigation and content aren't positioned on top of each other: https://codepen.io/DannyJoris/pen/ZJwdbv

Active states are accurate here because the scrollable div has the same offset top as the window: https://codepen.io/DannyJoris/pen/dzaxyG

Also in this case both the window scroll position and the scrollable element's position get updated. This seems confusing as I'd only expect the scrollable element (the one with data-spy="scroll") to update, not the window scroll: https://codepen.io/DannyJoris/pen/BdMXym

Clicking the navigation does always set the scrollable element to the correct position though. It's just that the active state trigger points seem inaccurate.

@Johann-S Johann-S added js v4 labels Sep 3, 2017

@Johann-S

This comment has been minimized.

Copy link
Member

commented Sep 3, 2017

You can adjust the accuracy of our Scrollspy by using data-offset attribute see : https://getbootstrap.com/docs/4.0/components/scrollspy/#options

@DannyJoris

This comment has been minimized.

Copy link
Author

commented Sep 3, 2017

Thanks, I guess it works when there's a fixed offset: https://codepen.io/DannyJoris/pen/eEXZLW

But what if the offset to the window top is variable? I feel like the offset should be calculated to the top of the element and not to the top of the window.

And what about the double scroll position jump?

@Johann-S

This comment has been minimized.

Copy link
Member

commented Sep 3, 2017

If you have something which is variable you should call the update method see : https://getbootstrap.com/docs/4.0/components/scrollspy/#methods

Currently we just jump on each sections vertically not horizontally if it's what you mean by "double scroll position jump"

@DannyJoris

This comment has been minimized.

Copy link
Author

commented Sep 3, 2017

With the double jump I mean this: https://codepen.io/DannyJoris/pen/BdMXym
Clicking the navigation item updates both the .scrollspy-example-content element offset and the window offset. I would expect it should only update any element with data-spy="scroll", not the window.

That's why I find it confusing that the window offset affects the offset in a contained (not body) data-spy="scroll" element.

@Johann-S

This comment has been minimized.

Copy link
Member

commented Sep 3, 2017

Sorry but I don't see any change on the .scrollspy-example-content except the move of the scrollbar and they are no change on the window offset 😟

@DannyJoris

This comment has been minimized.

Copy link
Author

commented Sep 3, 2017

Oh ok, maybe it's a cross browser issue. I'm on Chrome 60, macOS 10.12.6.

ilcxejx6sd

@dhmskrn

This comment has been minimized.

Copy link

commented Aug 5, 2018

I'm on Chrome version 68.0.3440.84 (Official Build) (64-bit) Windows 7 Professional and still have the same problem.

https://stackoverflow.com/questions/51691018/bootstrap-scrollspy-with-smooth-scroll-wrong-target

@orianna-zzo

This comment has been minimized.

Copy link

commented Sep 18, 2018

Oh ok, maybe it's a cross browser issue. I'm on Chrome 60, macOS 10.12.6.

ilcxejx6sd

I use scrollspy in my hugo theme and I came up with a similar problem. I checked on the bootstrap.js and found that offset is float array (using getBoundingClientRect()) while scrollTop is an int. I fix this with add 1 to scrollTop in _proto._process = function _process(), so it would be var scrollTop = this._getScrollTop() + this._config.offset + 1;. It works well in my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.