An example with two columns scrollable?
See original GitHub issueDo 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:17
Top Results From Across the Web
Independent column scroll in HTML page - css - Stack Overflow
Show activity on this post. I have two columns in my HTML page. Is it possible to make it so that they flow...
Read more >Bootstrap 2-column scrollable sidebar media template
Here we develop a 2 - column template with a side scrolling column, taking into consideration mobile and desktop views.
Read more >Handling overflow in multi-column layout - MDN Web Docs
In this guide, we look at how to deal with overflow in a multi-column (multicol) layout, both inside the column boxes and in...
Read more >Lists and grids | Jetpack Compose - Android Developers
A Lazy vertical grid will display its items in a vertically scrollable container, spanned across multiple columns, while the Lazy horizontal grids will...
Read more >How to fixed one column and scrollable other column or ...
When the webpage is divided into two equal columns, and the content inside the columns starts to overflow, the columns become scrollable.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
By the way, thanks for being so persistent here. I appreciate you trying to pin this down!
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.