How to make the carousel scroll only when the cursor is on it, istead of anywhere on the windows?

Question

I am using react-elastic-carousel in my app to scroll vertically between four components and each of them has some infos to show when scrolling on them. What I want to do is that the scrolling functionality should be happend only when the cursor is on the carousel and not everywhere on the page like is currently happening now. how I can make it possible any advices? Thanks a lot.

Here is what I did so far:

codesandbox.io/s/compassionate-leftpad-zzueys?file=/src/App.js

News.js:

    import React, {useEffect, useRef } from "react";
    import Carousel from "react-elastic-carousel";
    import "./ news.css";
    import {
      Center,
      Areas,
      Place,
      Others,
    } from "./Contents";
    
    const News = () => {
    
      useEffect(() => {
        document.title = "News";
      });
    
      const prevItemObject = "prev";
      const nextItemObject = "next";
    
      const slider = useRef(null);
    
      function scroll(e) {
        if (slider === null) return 0;
    
        e.wheelDelta > 0
          ? slider.current.onNextStart(prevItemObject, nextItemObject)
          : slider.current.onPrevStart();
      }
    
      useEffect(() => {
        window.addEventListener("wheel", scroll, true);
    
        return () => {
          window.removeEventListener("wheel", scroll, false);
        };
      }, []);
    
      return (
        <div className="container">
          <Carousel
            onScroll={scroll}
            verticalMode
            itemsToShow={1}
            enableSwipe={true}
            ref={slider}
          >
            <Relevant />
            <SearchByAreas />
            <FindAPlaceToLive />
            <FindTheRightRoomie />
          </Carousel>
        </div>
      );
    };
    
    export default News;

App.js:

import React from "react";
import News from "./News";

const App = () => {
  return (
    <div>
      <News />
    </div>
  );
};
export default App;

I have sensible information that I can't post here, I just want to understand how can do this only when the cursor is on the carousel instead of any place on the page. — saygas, Mar 02 '22 at 09:34

score 0 · Answer 1 · answered Mar 02 '22 at 08:36

0

your wheel event listener is on window for now, it will listen all the wheel events on the window. Maybe you could add the listener on the slider ref like this :

slider.current.addEventListener("wheel", scroll, true);

Could you provide a codepen sample please ? It would be easier to test it ;)

answered Mar 02 '22 at 08:36

Cleverballs

81
4

Thanks I will try to reproduce samething there – saygas Mar 02 '22 at 09:34
here is the link for what I just reproduce in codepen: https://codesandbox.io/s/compassionate-leftpad-zzueys?file=/src/App.js – saygas Mar 02 '22 at 09:58
1

I think it's because react-elastic-carousel doesn't return a html element to your useRef. You could create a new ref and pass it to the parent div, then listen the wheel event on this div. Something like this : https://codesandbox.io/s/solitary-river-4kg0ro?file=/src/App.js. But I agree with @cloned comment you could have some problems with mobile devices or mac trackpads – Cleverballs Mar 02 '22 at 20:55
Thanks @Cleverballs your suggestion works. I have already a problem with my mac trackpad is not properly and it jumping from the first item up to the last, but when I using the mouse it's a bit fine. Do you have any suggestion on how I can fix the trackpad issue? – saygas Mar 03 '22 at 17:02
1

You could check the wheel event stopping like this : https://codesandbox.io/s/vibrant-leakey-mwwgu4?file=/src/App.js. It's inspired by this answer : https://stackoverflow.com/a/28371047/12504544. It's not optimal because if you use the wheel very quickly, it won't work until you really stop. But I guess you could play with the timeout and some debounce from lodash – Cleverballs Mar 03 '22 at 21:32
Thanks for all help and info you provide. There is one problem, when scrolling from the top or from bottom and once the carousel reached and scroll all the items there is no way to continue the scroll outside of the carousel. like here: [link](https://codesandbox.io/s/peaceful-booth-9swn2o?file=/src/App.js). How can continue scrolling out of carousel when all items of the carousel reach the end? Thank you. – saygas Mar 04 '22 at 16:50
It's e.preventDefault() who prevents the scroll event to scroll the body. You could flag the current index position and if it's the end or the beginning of your slides, you don't do e.preventDefault(). Maybe something like this to start ? https://codesandbox.io/s/compassionate-moon-26y5hb?file=/src/App.js – Cleverballs Mar 07 '22 at 08:06
If I understand you well, by taking out the e.preventDefault and make a condition with image could solv the problem? – saygas Mar 07 '22 at 08:21
Yes e.preventDefault should only be called when you want to slide the carousel without scrolling the whole page. So if you know when you don't want to prevent it, you can disable it. See line 35 > https://codesandbox.io/s/compassionate-moon-26y5hb?file=/src/App.js – Cleverballs Mar 07 '22 at 08:34
I can see that the current state is that scrolling is only possible upward after the last item is reached but not possible downward yet. – saygas Mar 07 '22 at 09:21
1

Sorry there was a mistake and if you want to make it work better, you should look at the wheelDelta to get the correct condition. Something like this should work : https://codesandbox.io/s/compassionate-moon-26y5hb?file=/src/App.js It needs a little bit of cleaning obviously – Cleverballs Mar 07 '22 at 13:17
Thank so much for your help I have learn alot from you. – saygas Mar 07 '22 at 15:59
1

You're welcome, keep learning you're doing great – Cleverballs Mar 07 '22 at 19:35
Thank you, I will keep practicing. – saygas Mar 08 '22 at 12:34

How to make the carousel scroll only when the cursor is on it, istead of anywhere on the windows?

1 Answers1