feat(scroll): add top offset when automatically scrolling to main-scroll-item #1277
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
herrardo
reviewed
Sep 11, 2023
lauramargar
reviewed
Sep 12, 2023
|
It works perfectly with the regular results ( |
herrardo
suggested changes
Sep 13, 2023
| @@ -99,7 +112,9 @@ | |||
| oldObserver?.unobserve(this.$el); | |||
| newObserver?.observe(this.$el); | |||
| if (this.pendingScrollTo === this.item.id) { | |||
| this.$el.scrollIntoView(); | |||
| Vue.nextTick(() => { | |||
| this.$el.scrollIntoView(); | |||
There was a problem hiding this comment.
Suggested change
| this.$el.scrollIntoView(); | |
| this.$el.scrollIntoView({block: 'center'}) |
After doing some testing, this seems a good option. This option centers always the item in the viewport, so we would have some part of the previous row visible, but the specified item will be always in the view port.
Downside: We would have to modify some test probably.
Screen.Recording.2023-09-13.at.13.03.34.mov
lauramargar
approved these changes
Sep 14, 2023
CachedaCodes
deleted the
feature/EMP-2021-add-top-offset-when-scrolling-to-scroll-element-from-url
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
EMP-2021
Motivation and context
Depending on the setup's header it was possible that, when automatically scrolling to an element in the main scroll, the element was cut by the header. This feature adds a prop to the main-scroll-item to add an offset to the scrolling.
Type of change
What is the destination branch of this PR?
MainHow has this been tested?
Set the prop and reload a url that has
scrollattribute.