Observe the target by ID in Intersection
-
Hi,
I am using intersection to show list of products.
On return to the products list from single product page I want it scroll to the product I had viewed, to prevent user from scrolling all the way to see further products.
I just read about mutationObserver.observe(target, options)
but i couldn’t handle it.
Please help me to handle this.
Thanks a lot -
And maybe some code can tell what i mean:
updated () { setTimeout(() => { if (this.productInfo.detail) { let observer = new MutationObserver(function (mutations) { }) let target = document.querySelector('#prod' + this.productInfo.detail.id) observer.observe(target, { attributes: true }) } }, 600)
}
By scroll in to view method it can be like this:
document.getElementById('prod' + this.productInfo.detail.id).scrollIntoView({ behavior: 'smooth' })
But element is not visible in “intersection” till user scroll to get in to the element position to be observed and the above codes does not work.
Any Idea to handle this? -
And thanks to @PDan help in Discord I could handle it by saving the position of list item and scroll to the desired position like this:
updated () { this.$nextTick(() => { if (this.productInfo.detail) { let y = this.productInfo.y window.scrollTo({ top: y, behavior: 'smooth' }) } }) }
Thank you