I would like to customize the scrolling speed in header tab animation

[Sukirtha Anandaraman]

Dear Syncfusion Support Team,
I hope this message finds you well. I am currently using the "Tabs" component in JavaScript for my project, and I have encountered an issue with the horizontal scrolling behavior.
Issue Description:
While navigating between tabs, I have observed that the horizontal scroll speed is too fast, which causes the tabs to overscroll. As a result, some of the tabs are skipped or over-scrolled past, leading to a suboptimal user experience.
Steps to Reproduce:

• Set up a Tabs component with several tabs that require horizontal scrolling.
  
• Attempt to scroll through the tabs using the mouse or trackpad.
  
• Notice that the tabs scroll too quickly, causing some to be overscrolled and not easily accessible.
  

Expected Behavior:
The scroll speed should be slower or customizable, ensuring that tabs are scrolled through more smoothly without overscrolling.
Request:
Could you please provide guidance on how to reduce the horizontal scroll speed for the Tabs component or if there are any available options to customize the scrolling behavior?
Your assistance in resolving this issue would be greatly appreciated. I look forward to your feedback and any suggestions you may have to improve this functionality.
Thank you for your support.

Please Refer this below URL : https://stackblitz.com/edit/8dy2hw?file=index.js
Best regards,
A. Sukirtha

[Vijay Ravi]

Hi Sukirtha,

Suggestion 1: if you want to customize the scroll speed using navigation arrow in tab header

To customize the scroll speed when using the navigation arrows in the tab header, you can adjust the scrollStep property. This allows you to control the scrolling speed with the navigation arrows effectively.

scrollStep UG: https://ej2.syncfusion.com/javascript/documentation/tab/how-to/customize-tab-scroll-step

Suggestion 2: if you want to customize the animation scroll speed while navigating tab item

To customize the animation scroll speed while navigating tab item, you can adjust the aniamtion duration property. This allows you to control the animation scrolling speed  effectively.

[index.js]
 

var tabObj = new ej.navigations.Tab({

    heightAdjustMode: 'Auto',

    scrollStep: 80,

    overflowMode: 'Scrollable',

    animation: {

        previous: { effect: 'SlideLeftIn', duration: 1000, easing: 'ease' },

        next: { effect: 'SlideRightIn', duration: 1000, easing: 'ease' }

    },
}

Sample link: 9padjn (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay