0

I'm getting a strange error - trying to trigger the next and prev events on scroll within react for react-slick slider.

Error:

TypeError: Failed to execute 'scroll' on 'Window': parameter 1 ('options') is not an object.

  29 | 
  30 | componentWillMount(){
  31 |     window.addEventListener('wheel', function(e){
> 32 |         this.scroll(e.wheelDelta);
  33 |     })
  34 | }
  35 |

Here is my code: 

constructor(props) {
        super(props);
        this.scroll = this.scroll.bind(this);
    }

    scroll(y){
        y > 0 ? (
           this.slider.slickNext()
        ) : (
           this.slider.slickPrev()
        )
    }

    componentWillMount(){
        window.addEventListener('wheel', function(e){
            this.scroll(e.wheelDelta);
        })
    }

<Slider {...settings} ref={slider => this.slider = slider}>
                    {sliderItems}
                </Slider>
Filth
  • 3,116
  • 14
  • 51
  • 79
  • `console.log(this); this.scroll(e.wheelDelta);` – epascarello Dec 04 '17 at 22:12
  • @epascarello I'm not sure where you'd like to see this logged? – Filth Dec 04 '17 at 22:13
  • It is for you, what do you see for `this`, is it what you expect? Basic debugging. – epascarello Dec 04 '17 at 22:14
  • @Filth, sorry I've confused `wheelDeltaX` with `wheelDelta` I've deleted my answer, but there is this code that might be helpful at the end of this article : [Listening to wheell event across browser](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) – user10089632 Dec 04 '17 at 22:20
  • Still in my opinion, I stay away from those new events until they are stable and have widespread support, if you take this opinion you might consider move on to scroll for example. – user10089632 Dec 04 '17 at 22:24
  • This is exactly what I'm trying to achieve and works here? https://codepen.io/Grawl/pen/mMLQQb – Filth Dec 04 '17 at 22:29

0 Answers0