No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Observe the target by ID in Intersection

    Framework
    1
    3
    338
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • usher
      usher last edited by

      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

      1 Reply Last reply Reply Quote 0
      • usher
        usher last edited by usher

        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?

        1 Reply Last reply Reply Quote 0
        • usher
          usher last edited by usher

          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

          1 Reply Last reply Reply Quote 1
          • First post
            Last post