Angular 4 smooth scroll within div

Question

I'm trying to create a smooth scroll effect while scrooling within a div on a click event. I kind of made it work, but I can't configure it properly.

The objective is to create kind of a carousel, when the user clicks on the buttonto go right, then only the div containing the items of the carousel will scroll horizontally.

But, when i click on the button, the scroll is way too smooth, taking about 2-3 seconds to complete.

This is the code I have:

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);
        }
    });
}

If I give the setInterval a delay, such as setInterval(() => {...}, 16); then it will take longer to complete.

What I was expecting is to execute the whole animation in a total of 300ms, for example. Does anyone knows how to solve this? Or what I'm doing wrong?

Victor Ivens · Accepted Answer · 2017-10-08 12:33:34Z

2

In each step of your setInterval you're adding just one pixel to be scrolled.

You need to get the total distance in pixels to be scrolled and divide by the time, so you will have the velocity (physics, who would thought!?)

    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);
        }
    });
}

Edit:

As I said in the comments, I put a little jsFiddle to show how It can be achieve using css combined with scrollLeft. The scrollLeft part might even be discarded if the users don't have the need to scroll through it.

https://jsfiddle.net/y5m2xvzg/

In short, there's an outer element with overflow:hidden and fixed size. Inside of this there's in inner element which will grow with the content. When you go(), this inner element will be animated using css. After it finishes, the scrollLeft and transform properties are set correctly.

edited Oct 8, 2017 at 12:33

answered Oct 8, 2017 at 11:59

Victor Ivens

2,2993 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

celsomtrindade Over a year ago

Well, but in this case it's not working, because the scrollVelocity would be something like 0.375, and after adding to the scrollLeft position, it will turn back to 0, since it doesn't add fraction values.

Victor Ivens Over a year ago

Tweak with the time. Try 30 or even 3.

Victor Ivens Over a year ago

Actually, there's a better way to achieve this goal, with CSS animation. I'm putting a fiddle to exemplify it. Using scroll you trigger a repaint at every interval.

celsomtrindade Over a year ago

But if I change the time I'll not achieve the result I want. On the window it works because it uses the scrollTo function, wich is not avaliable on the div element. Also, about the css option, I'm using overflow hidden on the carousel element, does this interfer on the css animation?

Victor Ivens Over a year ago

Check if in your case, this library isn't enough to help you: idangero.us/swiper/#.WdobcmhSxGM It's very powerful.

|

Collectives™ on Stack Overflow

Angular 4 smooth scroll within div

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related