can get body scroll position but not set body scroll position



  • 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.



  • 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)
    


  • 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
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.