Плавный скролл с tween.js?

Question

[andrei_pro]

Всем привет.

Есть страница на которой контейнер со скролом, нужно при нажатии на кнопку сделать плавный скролл к указанным координатам. Для этого на объекты раньше использовал tween.js, но на document элемент почему-то не работает.
Как сделать плавный скролл с помощью этой или любой другой библиотеки?

<template>
  <div class="about">
    <div class="nav">
      <button @click="scroll">Scroll</button>
    </div>
    <div id="wrapper">
      <div id="container" class="info">
      </div>
    </div>
  </div>
</template>

<script>
  import {Easing, Tween, autoPlay} from 'es6-tween'

  autoPlay(true)

  export default {
    methods: {
      scroll() {
        const el = document.getElementById('wrapper')
        
        new Tween(el)
                .to({left: 1500, top: 1500}, 2000)
                .easing(Easing.Linear.None)
                .start()
      }
    }
  }
</script>

<style>
  .nav {
    position: absolute;
    height: 50px;
    background: #1b4b72;
    width: 100%;
  }
  #wrapper {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 100px;
    right: 0;
    overflow: auto;
    width: 1000px;
  }
  #container {
    position: absolute;
    left: 0;
    width: 2000px;
    height: 2000px;
    background: #e2f0fb;
  }
  #container.info {
    padding: 50px;
  }
</style>

Comments

[kulaeff]

В вашем коде вы анимируете `left` и `top`, тем самым двигаете сам слой `.wrapper`, а надо анимировать свойство `scrollTop`.

[andrei_pro]

kulaeff, ошибка в коде, там scrollLeft, scrollTop тоже не работает

Answer 1

[Антон Антон]

У меня работает такой код (плавный только там, где есть поддержка scroll behavior, да и фиг с ним) https://gist.github.com/FragsterAt/b72632976cac00f...
Ну и в CSS также scroll-behavior: smooth;
прописан для html, body и т.д.