A
A
andrei_pro2019-07-02 16:58:21
JavaScript
andrei_pro, 2019-07-02 16:58:21

Smooth scrolling with tween.js?

Hello.
There is a page on which a container with a scroll, you need to make a smooth scroll to the specified coordinates when you click on the button. To do this, I used tween.js on objects, but for some reason it does not work on the document element.
How to make smooth scrolling using this or any other library?

<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Anton, 2019-07-02
@andrei_pro

The following code works for me (smooth only where there is support for scroll behavior, and figs with it) https://gist.github.com/FragsterAt/b72632976cac00f...
Well, CSS is also registered for html, body, etc. .d. scroll-behavior: smooth;

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question