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

    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.scrollTop = this.bposition

Log in to reply

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