Content not need to hide after go to another tab when tab is sticky

Question

I am using material UI and react-sticky and its working good but i got one issue. https://codesandbox.io/s/xv41xzvyp I have shared what i have tried yet. Step to reproduce

1. Go to bottom of first tab and tab will stick
2. Try to go another tab but content will stay there it need to scroll to start position and

Answer 1

The StickyContainer component has a property node that is a ref to the topmost element of the container, so you can scroll that into view with the help of a ref of your own:

class CustomizedTabs extends React.Component {
  ref = React.createRef();
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value }, () => this.ref.current.node.scrollIntoView());
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <StickyContainer ref={this.ref}>{/* ... */}</StickyContainer>
      </div>
    );
  }
}