Question

我尝试在点击事件的div中进行scrooling时创建平滑的滚动效果。我有点工作，但我无法正确配置它。

目标是创建一种旋转木马，当用户点击按钮向右移动时，只有包含旋转木马项目的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属性设置正确。

div

1 个答案: