An example with two columns scrollable?

Do you think it could be possible to make an example with two columns scrollable?

This is my try but I don’t get it

• index.js

import styles from "./index.module.css"

import React from "react"
import PropTypes from "prop-types"
import Waypoint from "react-waypoint"
import randomColor from "randomcolor"

function getRandomInt(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)

  return Math.floor(Math.random() * (max - min)) + min
}

class Block extends React.Component {
  render() {
    return (
      <div id={this.props.id} ref={this.props.innerRef} style={{
        height: getRandomInt(200, 1200) + "px",
        backgroundColor: randomColor({ seed: this.props.i*10 }),
        fontWeight: "bold",
        fontSize: "20px",
        color: "white",
        padding: "20px",
        textShadow: "0px 0px 1px black",
        borderBottom: "4px dashed white",
        display: "block",
      }}>
        {this.props.id}
      </div>
    )
  }
}

Block.propTypes = {
  innerRef: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired,
  i: PropTypes.any.isRequired,
}

const BlockWithRef = React.forwardRef((props, ref) => {
  return <Block innerRef={ref} {...props} />
})

class SandboxPage extends React.Component {
  handleEnterA = (el, props) => {
    console.log("A: ENTER", el)
  }

  handleLeaveA = (el, props) => {
    console.log("A: LEAVE", el)
  }

  handleEnterB = (el, props) => {
    console.log("B: ENTER", el)
  }

  handleLeaveB = (el, props) => {
    console.log("B: LEAVE", el)
  }

  render() {
    return (
      <div className={styles.main} id="main">
        <div className={styles.column} id="A">
          {Array.from({length: 31}, (_, el) => (
            <Waypoint
              key={`A-${el}`}
              onEnter={(props) => { this.handleEnterA(el, props) }}
              onLeave={(props) => { this.handleLeaveA(el, props) }}
              fireOnRapidScroll
              topOffset="100px"
            >
              <BlockWithRef id={`A-${el}`} i={el} />
            </Waypoint>
          ))}
        </div>

        <div className={styles.column} id="B">
          {Array.from({length: 31}, (_, el) => (
            <Waypoint
                key={`B-${el}`}
                onEnter={(props) => { this.handleEnterB(el, props) }}
                onLeave={(props) => { this.handleLeaveB(el, props) }}
                fireOnRapidScroll
            >
              <BlockWithRef id={`B-${el}`} i={el} />
            </Waypoint>
          ))}
        </div>
      </div>
    )
  }
}

export default SandboxPage

• index.module.css

.main {
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}

.column {
  overflow-y: scroll;
  height: 100vh;
}

Thank you

[trotzig]

By the way, thanks for being so persistent here. I appreciate you trying to pin this down!

[kud]

Thank you @trotzig your component is amazing, I use it all the time. However, here I have to understand why it doesn’t work like I’d to.

My goal here is to have two synchronised scrolls depending on where you are on ONE scroll.

But to be fair I think this discussion should be in a chat. 😃

And about your note, the weird thing is that I’ve got hot reload, and when hot reload runs (like when I save my file), my render runs once again and seems to make it work. So I really wonder if I don’t have a problem with the lifecycle on React but it’s still weird it only happens on Firefox for the moment.