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

    can get body scroll position but not set body scroll position

    Help
    1
    3
    1020
    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.
    • ssuess
      ssuess last edited by

      Not sure if this is Quasar specific, but I am opening a modal and need to set the body under it to a fixed position to prevent it scrolling on mobile. This of course scrolls it to the top. Before opening the modal, I get the scroll position and set it like so:

      this.bposition = document.body.scrollTop
      console.log(document.body.scrollTop)
      

      And this works fine, I can output the correct position in my console. But then, when I close my modal, I try to do this:

        console.log(this.bposition) // proves my close function is running and gets the correct value
        var el = document.querySelector('body')
        el.scrollLeft = 0 // have tried with and without this line
        el.scrollTop = this.bposition
      

      But to no avail, the page will not scroll. I have tried on various elements within the page as well, none of them scroll.

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

        In case anyone else was having this problem, it results from a brief delay when the modal is closed before the class (.with-modal) has been removed. Solved (in a somewhat ugly manner) by introducing a timeout:

        setTimeout(() => {
                el.scrollTop = this.bposition
              }, 500)
        
        1 Reply Last reply Reply Quote 0
        • ssuess
          ssuess last edited by

          UPDATE: Somewhat faster, I found the function (in external code) that removes the class and duplicated it before my call, which works even better:

            var el = document.querySelector('body')
            el.classList.remove('with-modal')
            el.scrollTop = this.bposition
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post