Vue.js - How to 'grab' a scroll event from a vuetify v-dialog component

Question

The javascript project I am working on is trying to incorporate a 'scroll-to-top' button that only renders after scrolling down (y-axis) 20px inside a Vuetify v-dialog component. We also have a v-card and v-treeview (has scrollable list of items) inside of the v-dialog. However, I can't seem to figure out how to actually 'grab' the scroll event within that v-dialog component to trigger anything.

<v-dialog>
  <v-card>
    <v-treeview>  //scrollable list
    </v-treeview>
  </v-card>
</v-dialog>

Any thoughts??

Here is a very similar Codepen of what I am trying to accomplish. https://codepen.io/carlos-henreis/pen/vzXKBJ

Thanks!

So, you've tried to place @scroll event on the dialog, right? — Dvdgld
– Dvdgld, Commented Nov 28, 2020 at 7:41
And did you add scrolable prop? vuetifyjs.com/components/dialogs#scrollable — Dvdgld
– Dvdgld, Commented Nov 28, 2020 at 7:59
I did try those. Honestly, because the v-treeview is inside a v-card, that is inside a v-dialog, I'm not even sure which component is the one that is actually scrolled. I've tried adding a scroll event, and the v-scroll directive, on all of them and I can't get any scroll event to even trigger anything. The codePen example works perfectly as a stand-alone component tossed into the root-level of any page view, because it can be triggered by the DOM window event, but I just can't access any 'scroll' event from inside a Vuetify component. — KBoicourt
– KBoicourt, Commented Nov 29, 2020 at 20:02

Dharman · Accepted Answer · 2021-05-05 16:28:03Z

1

I experienced the same issue as OP. None of the expected behavior for v-scroll or $vuetify.goTo() occurred within the dialog.

Ultimately, I implemented a vanilla javascript solution by utilizing

element.scrollIntoView() - MDN

on an added div within the dialog.

In template:

<v-dialog>
  <div id="thisElement">
    <v-card>
      <v-treeview>
         //scrollable list
         <v-btn @click="goToTop">Scroll Up</v-btn>
      </v-treeview>
    </v-card>
  </div>
</v-dialog>

In methods:

goToTop() {
    document.getElementByID("thisElement").scrollIntoView();
  },

edited May 5, 2021 at 16:28

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 5, 2021 at 16:22

hgallop

113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RoyB Over a year ago

They're asking for the event that triggers when the view is being scrolled. So that they can trigger behaviour when the scrolling started. Your answer doesn't show how that is being done, I believe.

hgallop Over a year ago

True, I was unfortunately unable to identify the event in dialog because it didn't occur within the dialog and instead would only occur at the document level. It is likely due to the fact that the dialog is removed from the normal document flow.

user15453592 · Accepted Answer · 2021-03-23 18:20:05Z

0

add "scrollable" prop to "<v-card>"
add v-scroll.self="onScroll" to (or element that's scrolling) (per v-scroll documentation)
add id to (id="requestform") (to select for scrolltop)
add button to scroll to top (same as codepen above)

add toTop method:

toTop() {
  document.getElementById('requestform').scrollTop = 0
},

edited Mar 23, 2021 at 18:20

answered Mar 22, 2021 at 15:41

user15453592

92 bronze badges

Comments

hljubic · Accepted Answer · 2023-03-02 16:27:24Z

0

If you want to have smooth transition:

document.getElementById("elementId").scrollIntoView({behavior: 'smooth'});

answered Mar 2, 2023 at 16:27

hljubic

1491 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to 'grab' a scroll event from a vuetify v-dialog component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related