question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adapt to children's changes in dimension

See original GitHub issue

The Scrollbars component doesn’t react to changes in the height (and I assume width) of its children until the user starts scrolling. This is a problem for content that can have its dimensions change dynamically. For instance, I have a file tree that the user can expand many levels down and as it gets expanded, it eventually overflows the container. At the moment, the scrollthumb doesn’t appear until the user starts scrolling using the mousewheel. What is worse is that once the user starts closing the file tree, as it shrinks, the scrollthumb doesn’t disappear even though the content is no longer scrollable.

I have managed to find a solution for my own usecase by using react-measure to watch the changes in the dimensions of the children and then triggering a state change to rerender the scrollbars component.

However, it would be best if the scrollbars component handled this internally as it would match the behavior of the browsers’ scrollbars.

P.S. for the sake of others who may have the same issue, here’s what I did with react-measure to solve the problem:

<Scrollbars
	{...this.props}
>
	<Measure
		onMeasure={dimensions => this.setState({dimensions})}
	>
		<div>
			{this.props.children}
		</div>
	</Measure>
</Scrollbars>

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:10
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
hosseinnedaeecommented, Jul 21, 2020

I have created a component like this and it works:

import React, { useRef } from 'react';
import Measure from 'react-measure';
import { Scrollbars } from 'react-custom-scrollbars';

const Scrollbar: React.FC = ({ children }) => {
  const ScrollbarsRef = useRef<any>(null);
  return (
    <Scrollbars
      ref={ScrollbarsRef}
    >
      <Measure
        bounds
        onResize={() => {
          ScrollbarsRef.current && ScrollbarsRef.current.forceUpdate();
        }}
      >
        {({ measureRef }) => <div ref={measureRef}>{children}</div>}
      </Measure>
    </Scrollbars>
  );
};

export default Scrollbar;
0reactions
iglizercommented, Feb 19, 2018

Easiest option for now is to force an update on the scrollbar element inside the callback of the resizing event: this.scrollbarElement.forceUpdate(); (given that scrollbarElement is a ref to Scrollbars )

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding Temperament: Adaptability
Adaptability refers to how easily a child adjusts to changes in his environment after his initial response. Is your child flexible or does...
Read more >
Piaget's Theory of Cognitive Development - Lumen Learning
Piaget believed that children's pretend play and experimentation helped them solidify the new schemas they were developing cognitively. This involves both ...
Read more >
Three Early Childhood Development Principles to Improve ...
Using these design principles to promote positive change on all three dimensions is our best chance to help adults provide safe and responsive...
Read more >
Changes in Young Children's Family Structures and Child ...
Moving beyond the home, this study explores the association between changes in family structure and changes in several dimensions of early child care....
Read more >
7 Ways to Help Kids Cope with Big Life Changes
Discover 7 highly effective strategies to help your child feel safe, adjust, and build resilience as they face big life changes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found