Всем привет.
Есть страница на которой контейнер со скролом, нужно при нажатии на кнопку сделать плавный скролл к указанным координатам. Для этого на объекты раньше использовал 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>
