Scroll to bottom of div with Vue js

Question

I have a Vue component with several elements in it  I want to automatically scroll to the bottom of that element when a method in the component is called  basically  do the same as in Scroll to bottom of div    However  I haven t found the way to get the element within my component and modify scrolTop  I m currently using Vue 2 0 8

User · Answer

I tried the accepted solution and it didn t work for me  I use the browser debugger and found out the actual height that should be used is the clientHeight BUT you have to put this into the updated   hook for the whole solution to work   data    return     conversation                        mounted     EventBus  on  msg-ctr--push-msg-in-conversation   textMsg   gt      this conversation push textMsg       Didn t work doing scroll here        updated                  lt     PUT IT HERE      var elem   this  el   elem scrollTop   elem clientHeight

User · Answer

2021 easy solution that won t hurt your brain    use el scrollIntoView   Here is a fiddle  This solution will not hurt your brain having to think about scrollTop or scrollHeight  has smooth scrolling built in  and even works in IE  scrollIntoView   has options you can pass it like scrollIntoView  behavior   smooth    to get smooth scrolling  methods      scrollToElement         const el   this  el getElementsByClassName  scroll-to-me   0        if  el             Use el scrollIntoView   to instantly scroll to the element       el scrollIntoView  behavior   smooth                  Then if you wanted to scroll to this element on page load you could call this method like this  mounted       this scrollToElement       Else if you wanted to scroll to it on a button click or some other action you could call it the same way   lt button  click  quot scrollToElement quot  gt scroll to me lt  button gt   The scroll works all the way down to IE 8  The smooth scroll effect does not work out of the box in IE or Safari  If needed there is a polyfill available for this here as  mostafaznv mentioned in the comments

User · Answer

As I understood  the desired effect you want is to scroll to the end of a list  or scrollable div  when something happens  e g   a item is added to the list   If so  you can scroll to the end of a container element  or even the page it self  using only pure Javascript and the VueJS selectors   var container   this  el querySelector   container    container scrollTop   container scrollHeight    I ve provided a working example in this fiddle  https   jsfiddle net my54bhwn  Every time a item is added to the list  the list is scrolled to the end to show the new item   Hope this help you

User · Answer

The solution did not work for me but the following code works for me  I am working on dynamic items with class of message-box  scrollToEnd                 setTimeout      gt                    this  el                      getElementsByClassName  quot message-box quot                                                 this  el getElementsByClassName  quot message-box quot   length -                             1                       scrollIntoView                   50              Remember to put the method in mounted   not created   and add class message-box to the dynamic item   setTimeout   is essential for this to work  You can refer to https   forum vuejs org t getelementsbyclassname-and-htmlcollection-within-a-watcher 26478 for more information about this

User · Answer

If you need to support IE11 and  old  Edge  you can use  scrollToBottom         let element   document getElementById  quot yourID quot        element scrollIntoView false      If you don t need to support IE11  the following will work  clearer code   scrollToBottom         let element   document getElementById  quot yourID quot        element scrollIntoView  behavior   quot smooth quot   block   quot end quot

User · Answer

Use ref attribute on DOM element for reference    lt div class  content scrollable  ref  msgContainer  gt       lt  -- content -- gt   lt  div gt     You need to setup a WATCH     data         return         count  5               watch        count  function           this  nextTick function             var container   this  refs msgContainer          container scrollTop   container scrollHeight   120                         Ensure you re using proper CSS    scrollable     overflow  hidden    overflow-y  scroll    height  calc 100vh - 20px

User · Answer

For those that haven t found a working solution above  I believe I have a working one  My specific use case was that I wanted to scroll to the bottom of a specific div - in my case a chatbox - whenever a new message was added to the array  const container   this  el querySelector   messagesCardContent            this  nextTick      gt                 DOM updated           container scrollTop   container scrollHeight               I have to use nextTick as we need to wait for the dom to update from the data change before doing the scroll  I just put the above code in a watcher for the messages array  like so  messages          handler                this scrolls the messages to the bottom on loading data         const container   this  el querySelector   messagesCard            this  nextTick      gt                 DOM updated           container scrollTop   container scrollHeight                             deep  true

User · Answer

In the related question you posted  we already have a way to achieve that in plain javascript  so we only need to get the js reference to the dom node we want to scroll     The ref attribute can be used to declare reference to html elements to make them available in vue s component methods     Or  if the method in the component is a handler for some UI event  and the target is related to the div you want to scroll in space  you can simply pass in the event object along with your wanted arguments  and do the scroll like scroll event target nextSibling

User · Answer

I had the same need in my app  with complex nested components structure  and I unfortunately did not succeed to make it work    Finally I used vue-scrollto that works fine

User · Answer

Here is a simple example using  ref to scroll to the bottom of a div    x000D   x000D     x000D  Defined somewhere  x000D    var vueContent   new Vue   x000D        el    vue-content   x000D            x000D      x000D   x000D  var messageDisplay   vueContent  refs messageDisplay  x000D  messageDisplay scrollTop   messageDisplay scrollHeight  x000D   lt div id  vue-content  gt  x000D     lt div ref  messageDisplay  id  messages  gt  x000D       lt div v-for  message in messages  gt  x000D           message    x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Notice that by putting ref  messageDisplay  in the HTML  you have access to the element through vueContent  refs messageDisplay

[javascript] Scroll to bottom of div with Vue.js

Examples related to javascript

Examples related to vue.js