javascript - Angular 4在div内平滑滚动

Question

我试图在点击事件的 div 内滚动时创建平滑的滚动效果。我有点让它工作，但我无法正确配置它。

目标是创建一种轮播，当用户单击按钮向右时，只有包含轮播项目的 div 才会水平滚动。

但是，当我点击按钮时，滚动太流畅了，大约需要 2-3 秒才能完成。

这是我的代码:

private parentEl;

ngOnInit() {
    this.parentEl = document.getElementsByClassName('carousel_wrap');
}

public goRight(): void {
    const el = this.parentEl[0];
    const endPosition = el.scrollLeft + this.scrollFactor; // scrollFactor is the width of the child items on the carousel

    let interval = setInterval(() => {
        el.scrollLeft++;

        if ( el.scrollLeft === endPosition ) {
            clearInterval(interval);
        }
    });
}

如果我给 setInterval 一个延迟，例如 setInterval(() => {...}, 16); 那么它将需要更长的时间才能完成。

例如，我期望的是在总共 300 毫秒内执行整个动画。有谁知道如何解决这个问题？或者我做错了什么？

Answer 1

在 setInterval 的每一步中，您只添加一个要滚动的像素。

您需要获取要滚动的总距离(以像素为单位)并除以时间，这样您就可以得到速度(物理，谁会想到!？)

    public goRight(): void {
    const el = this.parentEl[0];
    const endPosition = el.scrollLeft + this.scrollFactor; // scrollFactor is the width of the child items on the carousel

    const time = 300;
    const scrollVelocity = endPosition / time;

    let interval = setInterval(() => {
        el.scrollLeft += scrollVelocity;

        if ( el.scrollLeft >= endPosition ) {
            clearInterval(interval);
        }
    });
}

编辑:

正如我在评论中所说，我放了一点jsFiddle来展示如何使用css结合scrollLeft来实现它。 如果用户不需要滚动滚动部分，则甚至可能会丢弃scrollLeft部分。

https://jsfiddle.net/y5m2xvzg/

简而言之，有一个具有 overflow:hidden 和固定大小的外部元素。里面有一个内部元素，它会随着内容的增长而增长。 当您使用 go() 时，该内部元素将使用 css 进行动画处理。完成后，scrollLeft 和 transform 属性已正确设置。