2

I taught myself Vue.js a couple of days ago in the evening and already created my first application yesterday which will soon be used by tens of thousands of users on a daily basis. The original was made with HandleBars and jQuery.

The only thing I couldn't get to work as of yet is the following piece of code:

$(".conversation-container").animate({ scrollTop: $(".conversation-container").prop("scrollHeight") }, 10);

I tried with the following:

var container = this.$el.querySelector(".conversation-container");
container.scrollTop = container.scrollHeight;

but unfortunately that didn't provide the same behavior.
Anyone can help me out to accomplish this so I can take jQuery out of the page and go solely Vue.js?

Kris van der Mast
  • 16,343
  • 8
  • 39
  • 61
  • Can you create a fiddle? – Vucko Jun 07 '18 at 07:05
  • JQuery animate is basically trying to tween a start and end value over a provided duration. If you want a lightweight tweener, consider using [TweenJS](https://github.com/tweenjs/tween.js): I've used it with VueJS for JS-dependent animations, and it worked very well ;) – Terry Jun 07 '18 at 08:01
  • @Terry I'll take a look into that. Thank you for the suggestion. – Kris van der Mast Jun 07 '18 at 09:51
  • @Vucko, it's enterprise software under confidential level hence I can't repro a fiddle. – Kris van der Mast Jun 07 '18 at 09:51
  • @XIII k then. Check [vue2-smooth-scroll](https://www.npmjs.com/package/vue2-smooth-scroll), I've used in the past for similar situations. – Vucko Jun 07 '18 at 10:24

1 Answers1

0

There is no one liner solution to get smooth scroll animations in vanilla JavaScript. If you want pointers on how to attain the same behavior please reference this answer:

Cross browser JavaScript (not jQuery...) scroll to top animation

Stephan-v
  • 19,255
  • 31
  • 115
  • 201