Fix click event bug on scroll

master
Hasan Genc 5 years ago
parent 1e53d90951
commit 14f21d8465
  1. 3
      src/components/scrolling-carousel/index.tsx
  2. 4
      src/styles/slider/styles.module.css
  3. 2
      src/styles/slider/styles.module.css.d.ts
  4. 4
      website/docs/scrollingCarousel.md

@ -58,12 +58,13 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
const mouseUp = (_: MouseEvent) => {
setIsDown(false);
setShowArrow(showArrows());
slider.current!.classList.remove(styles.sliding);
};
const mouseMove = (e: MouseEvent) => {
if (!isDown) return;
e.preventDefault();
slider.current!.classList.add(styles.sliding);
const eventPosition = e.pageX - slider.current!.offsetLeft;
const slide = eventPosition - position.startX;

@ -18,3 +18,7 @@
.slider > * {
flex: 0 0 auto;
}
.sliding > * {
pointer-events: none;
}

@ -1,8 +1,10 @@
export const sliderBase: string;
export const slider: string;
export const sliding: string;
interface Namespace {
sliderBase: string;
slider: string;
sliding: string;
}
declare const stylesModule: Namespace;
export default stylesModule;

@ -12,7 +12,9 @@ const slideData = [{"text":"skyline","img":"data:image/jpeg;base64,/9j/4AAQSkZJR
<ScrollingCarousel className="scrolling-carousel-example1">
{
slideData.map((d, i) =>
<div key={i} style={{
<div key={i}
onClick={() => console.log('CLICK')}
style={{
cursor: "pointer",
display: "flex",
border: "1px solid #DFE1E5",

Loading…
Cancel
Save