How to scroll to an element

danielo515

Hello, I have been reading the scroll documentation for almost an hour and I’m still unable to understand it.
What I want to do is, when someone clicks on one button I want to scroll to certain dom element, which is out of view.
I tried using refs and the scroll utils, but they don’t work at all, nothing happens. Checking the console I can see that the getScrollPosition function always returns 0, and therefore no navigation happens.
If you can tell me a nice way to simply scroll to certain element I will be very grateful. Also I really think that documentation should be revised, they seem wrong.

Thanks in advance

a47ae

Funny, the same question was asked in Discord yesterday and we wanted to upgrade the docs for it.
Here is the solution we came up with

import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll

export default {
  methods: {
    handleScroll () {
      const ele = document.getElementById('test') // You need to get your element here
      const target = getScrollTarget(ele)
      const offset = ele.offsetTop - ele.scrollHeight
      const duration = 1000
      setScrollPosition(target, offset, duration)
    }
  }
}

danielo515

Hello @a47ae , thank you for your response.
The part about getting the element was pretty simple, I was just using references. However, the animation part was more difficult.
May I ask why are you calculating the offset that way ? In my case the element it’s out of view, and its size is close to the size of the window. Using your code I get an offset of 18, which is barely noticeable. However, if I just use ele.offsetTop directly the element just scrolls into view perfectly, sho hence my question, why are you calculating the offset that way ?

Another thing I am unable to understand is how the (and why) the target is decided. In my case, I don’t have any element with the scroll class, so window is used. Using window and calculating the offset as I said, works perfectly. On the contrary, if I add the scroll class to the current page, then the scroll does not happen, no matter how you calculate the offset. All this stuff is very confusing.

Regards.

rstoenescu

@danielo515 You don’t need anything from Quasar for this. Just think in plain JS terms only. The getScrollTarget() is a helper which looks for the closest DOM element with scroll CSS class or else returns the window object.

mesqueeb

@danielo515 @a47ae
I had exactly the same problem with this snippet as you. It worked when I just deleted - ele.scrollHeight from the snippet above.

It works with a helper function like so:

	function scrollToElement (el) {
	  let target = getScrollTarget(el)
	  let offset = el.offsetTop // do not subtract the el.scrollHeight here
	  let duration = 1000
	  setScrollPosition(target, offset, duration)
	}

I also updated the snippet in the Quasar documentation and made my PR here:
https://github.com/quasarframework/quasar-framework.org/pull/649

btree

Why not just use the javascript scrollIntoView() ?

fonny

I still have this problem, and my solution is as follows:

<template>
  <q-page
    id="pageChat"
    ref="pageChat"
    class="flex column scroll"
  >
  ...
  // ul->lists
  ...
  </q-page>
<template>

<script>
mounted(){
  this.scrollToBottom()
},
methods: {
  scrollToBottom () {
    const el = this.$refs.pageChat.$el
    // MUST call it in timer
    setTimeout(() => {
      window.scrollTo(0, el.scrollHeight)
    }, 100);
  },
  submitMsg () {
    // do something ...
    this.$nextTick(function(){
      this.scrollToBottom()
    })
  }
}
</script>

BTW, these two things seem to be the same:

const ela = document.getElementById('pageChat')
const elb = this.$refs.pageChat.$el
// ela === elb
console.log(ela);
console.log(elb);

No More Posting New Topics!

How to scroll to an element