question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] Is there a way to programatically scroll a modal to the top?

See original GitHub issue

I’ve tried so many things. I tried setting a ref on the b-modal and then doing this.$refs.myModal.scrollTop = 0

I’ve tried using other vue libraries such as vue-scrollTo

Finally I got it to work by using jQuery:

          this.$nextTick(() => {
            $('.modal-content > .modal-body').scrollTop(0);
          });

But I am thinking there must be a better way… would appreciate a little help with this!

Thanks!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
vesper8commented, Sep 18, 2019

thank you!! that works very nicely

0reactions
tmorehousecommented, Sep 19, 2019

You need to get a ref of something inside the modal (i.e. a div, or other element that you have in the modal).

The modal’s internal refs will not exist until after the shown event is fired (after the enter transition has completed).

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to scroll to the top of a modal window in javascript
To scroll the page to the modal, select html, body and scroll to the offset top of the modal $("html, body").
Read more >
How to scroll on the top of modal - Salesforce Stack Exchange
You should select your modal window specificly and use the scroll on it. Please see if this article would help it seems fairly ......
Read more >
How to scroll automatically to the Bottom of the Page using ...
To auto scroll a page from top to bottom we can use scrollTop() and height() method in jquery. In this method pass the...
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
If you have overscroll-behavior: contain; selected, the outer container will not scroll unless you move your cursor out of the inner container ...
Read more >
How to prevent overflow scrolling in CSS - LogRocket Blog
Similarly, another way to achieve this is by programmatically adding a new CSS class when the modal is open and removing the class...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found