在 angularjs 中为 scrollLeft 设置动画

Question

So I am trying to animate the scrollLeft property on an element I get from the $event . I can set the scrollLeft easily but it doesn't animate. So I tried adding the animate() method to it and its no longer scrolling. Is there something I am missing here?

The function:

vm.scrollChipsContainer = function (event, direction) {
  var element = event.target.parentElement;
  var scrollPos = element.scrollLeft;
  switch (direction) {
    case 'right':
      event.target.parentElement.animate({scrollLeft: scrollPos + 100}, 100);
      break;
    case 'left':
        event.target.parentElement.animate({scrollLeft: scrollPos - 100}, 100);
      break;
    default:
    break;
  }
};

Answer 1

Use

 element.scrollTo({
  left: your_value,
  behavior: 'smooth'
});

https://stackblitz.com/edit/angular-wo2imk