Perfect-scrollbar: Smooth scrolling

[snuuve]

Is it possible to make scrolling smooth (animated etc) ?

[hatashiro]

Please add transition style like below:

.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
  transition: .2s linear left;
  /* maybe other vendor-prefixed transitions */
}
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  transition: .2s linear top;
  /* maybe other vendor-prefixed transitions */
}

You can freely change the duration and timing function.

[snuuve]

Ok, i know that. But how to make smooth content scrolling in container, not scrollbars ;p

[hatashiro]

Oh, sorry I mistook. PS don't use animation for the container scrolling. It uses plain scrollLeft and scrollTop, so the container cannot be scrolled smoothly with CSS animation or any. It may be possible with JS animation(using setInterval), but it's a big performance burden and must be quite error-prone. If it's really needed, there may be other custom scrollbars using CSS styles to emulate scroll, such as translate, or top and left.

Sorry that I cannot help so much.

[kebot]

I use gsap's ScrollToPlugin:
https://greensock.com/ScrollToPlugin

[arbiasgjoshi]

@kebot - Sorry for asking but, could you post/PM the code u used or some explanations regarding it. I've used greensock in the past, however not for such circumstances. I'm having a hard time getting smooth scroll to work, and any help would be appreciated.

[tiagomatosweb]

Does it mean that the Perfect Scroll has the same behaviour of the native browser scroll?

[dilame]

@tiagomatosweb Unfortunately, no

[pinta83]

You can actually just animate the scroll with js....

$('#yourElementId').animate({ scrollTop: 500 }, 400); // 500 = Y scroll offset, 400 = animation speed..

[HereIsJimmy]

You can actually just animate the scroll with js....

$('#yourElementId').animate({ scrollTop: 500 }, 400); // 500 = Y scroll offset, 400 = animation speed..

Do you realise that that's not VanillaJS right?

[pinta83]

I do, but do you realise that I'm not a developer of this lib and I've offered a jQuery solution that works?
If you need it to work with vanillaJS, write your own from the jQuery answer :)