Vue is the framework I am utilizing for my current project.
JavaScript:
let captureElement = document.getElementById('tag' + (index - 1));
if (captureElement) {
captureElement.parentNode.scrollIntoView({behavior:"smooth",block: "start", inline: "nearest"});
}
HTML:
<div v-for="(item,index) in data">
<p class="tag" :id="`tag${index}`">{{item.catagory}}</p>
<swipeout v-for="(item2,index2) in item.list" :key="`item${index2}`">
//some code
</swipeout>
</div>
How the code works:
The variable captureElement represents p.tag.
Its parent node is outside the div.
scrollIntoView's options are set to
{behavior:"smooth",block: "start", inline: "nearest"}My expectations:
I anticipate that p.tag will smoothly scroll into view with its top aligning perfectly at the top of the viewport.
Actual outcome:
However, when scrolling to p.tag#tag2, there seems to be a minor gap above it, which appears to be part of p.tag#tag1. This gap may be around 1px in height.
For a visual reference, please refer to the screenshot below:
https://i.sstatic.net/gBeS3.png