Scrolling snap for Scroll Area

[bttrvng99]

I'm trying to create the scroll area with some scroll snapping from TailwindCSS. Below is the code to implement this feature, but the scrolling isn't smooth if I grag the scrollbar in desktop mode (it's smooth on mobile mode or using Shift + scroll on desktop). How can I make the animation smooth when i drag the scroll bar?

<ScrollArea className='*:snap-x'>
  <div className="flex flex-row scroll-smooth *:h-auto *:w-96 gap-5 *:snap-center">
    {res.data.items?.filter((item) => !item.isDraft).map((card, index) => (<BlogCard key={card.id} {...card} index={index}/>))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

(smooth like the scrolling of each of the examples in this site https://tailwindcss.com/docs/scroll-snap-type)

[AbhishekPethe]

I'm trying to create the scroll area with some scroll snapping from TailwindCSS. Below is the code to implement this feature, but the scrolling isn't smooth if I grag the scrollbar in desktop mode (it's smooth on mobile mode or using Shift + scroll on desktop). How can I make the animation smooth when i drag the scroll bar?

<ScrollArea className='*:snap-x'>
  <div className="flex flex-row scroll-smooth *:h-auto *:w-96 gap-5 *:snap-center">
    {res.data.items?.filter((item) => !item.isDraft).map((card, index) => (<BlogCard key={card.id} {...card} index={index}/>))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

(smooth like the scrolling of each of the examples in this site https://tailwindcss.com/docs/scroll-snap-type)

I tried your method , snap scroll not working for me at all !!