Breaking News: Grepper is joining You.com. Read the official announcement!

mouse wheel scroll sections in react

Xerothermic Xenomorph answered on March 9, 2022 Popularity 9/10 Helpfulness 1/10

answer mouse wheel scroll sections in react

mouse wheel scroll sections in react

Comment

import React, { Component } from "react";
import ReactScrollWheelHandler from " react-scroll-wheel-handler";

class App extends React.Component {
  state = {
    currentIndex: 0,
    colors: ["red", "black", "grey", "blue", "green"],
  };
  nextIndex = () => {
    const { colors, currentIndex } = this.state;
    if (currentIndex == colors.length - 1) {
      return this.setState({ currentIndex: 0 });
    }

    return this.setState({
      currentIndex: currentIndex + 1,
    });
  };

  prevIndex = () => {
    const { colors, currentIndex } = this.state;
    if (currentIndex == 0) {
      return this.setState({
        currentIndex: colors.length - 1,
      });
    }

    return this.setState({
      currentIndex: currentIndex - 1,
    });
  };

  render() {
    const { colors, currentIndex } = this.state;
    return (
      <div>
        <ReactScrollWheelHandler
          upHandler={this.prevIndex}
          downHandler={this.nextIndex}
          style={{
            width: "100%",
            height: "100vh",
            backgroundColor: colors[currentIndex],
            transition: "background-color .4s ease-out",
          }}
        >
          <h1>SCROLL FOR CHANGE BACKGROUND COLOR</h1>
        </ReactScrollWheelHandler>
      </div>
    );
  }
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: www.npmjs.com

Tags: javascript mouse scroll sections

Link to this answer
Share Copy Link

Contributed on Mar 09 2022

Xerothermic Xenomorph

0 Answers Avg Quality 2/10

mouse wheel scroll sections in react

Contents

More Related Answers

mouse wheel scroll sections in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.