Scrolling within a modal

[AbrahamBrookes]

trafficstars

Hi this plugin works great when the component is a part of the page, is there a way to make it work when the component is in a scrollable modal? or rather, nested within any other element that has its overflow scrollable?

[rigor789]

Yes, change the container to the scrolling container: https://github.com/rigor789/vue-scrollto#container

[ehsaneona]

hi, i set the container to my modal, but it does not work.

[jetlej]

Same problem here. Scrolling within a container does not work

[rigor789]

If you can provide a sample (jsfiddle/codesandbox etc), I can take a look - but you are most likely not setting the right container.

[GMolini]

Hi, Im also having this problem.

Ive created a codesandbox: https://codesandbox.io/s/lucid-gauss-n1fhw9?file=/src/App.vue

As you can see in the console, the element is found within the container, and the done() callback is called. But no scroll is performed.

Thank.!

[rigor789]

@GMolini the #scrollableDiv isn't actually scrollable, it's the parent element that has overflow

const container = document.getElementById("scrollableDiv");

const options = {
 container: container.parentElement
 // ...
}

// ...

That works as expected.

[GMolini]

Ok thanks! Yeah, that works.

Another thing that was happening to me is that some things on the dom that i was rendering with a v-html werent loaded by the time i was doing the scrolling. Even using $nextTick wasnt working. But doing a timeout of just 1ms has solved it.

setTimeout(function() {
   self.$scrollTo(`#${element.id}`, 1000, options);
}, 1);