简体繁体 English

在javascript中的“mouseup”事件后动画滚动

[英]Animate scroll after 'mouseup' event in javascript

原文 2022-05-27 22:06:39 1 1 javascript/ css/ reactjs/ react-hooks/ next.js

I'm creating a simple slide with the scroll, but the problem is when the 'mouseup' event happens, the animation scroll-behavior: smooth;我正在用滚动创建一个简单的幻灯片，但问题是当“mouseup”事件发生时，动画scroll-behavior: smooth; that I programmed in css.我用css编程的。 I also added the transition in my React code to try to solve the problem, and it didn't help.我还在我的 React 代码中添加了转换以尝试解决问题，但它没有帮助。

The event I expect is that when the pointer is being dragged, the panel animates the scroll with the smooth event.我期望的事件是，当指针被拖动时，面板会使用平滑事件为滚动设置动画。 And what is happening now and when you release the cursor the scroll has no animation and happens quickly in the blink of an eye.现在发生了什么，当您释放光标时，滚动没有动画，并且在眨眼间迅速发生。 I hope you understood.我希望你明白。

https://stackblitz.com/edit/nextjs-rzaxxp?file=components%2FScrollSlide.jsx https://stackblitz.com/edit/nextjs-rzaxxp?file=components%2FScrollSlide.jsx

1 个解决方案

The goal is a bit unclear and your explanation is not easy to follow, however, if you just want to create a slider/carousel, don't try to invent the wheel, you could just simply use SwiperJS .目标有点不清楚，你的解释也不容易理解，但是，如果你只是想创建一个滑块/轮播，不要试图发明轮子，你可以简单地使用SwiperJS 。

I'm using it for quite some time and so far this is the best slider/carousel I've ever used.我使用它已经有一段时间了，到目前为止，这是我用过的最好的滑块/旋转木马。

Easy to set up, great examples, available for vanilaJS, React/Next, Angular, Vue...易于设置，很好的示例，可用于 vanilaJS、React/Next、Angular、Vue...