{"action":"created","issue":{"url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/98","repository_url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars","labels_url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/98/labels{/name}","comments_url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/98/comments","events_url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/98/events","html_url":"https://github.com/malte-wessel/react-custom-scrollbars/issues/98","id":187459925,"number":98,"title":"Adapt to children's changes in dimension","user":{"login":"amirmohsen","id":7075106,"avatar_url":"https://avatars.githubusercontent.com/u/7075106?v=3","gravatar_id":"","url":"https://api.github.com/users/amirmohsen","html_url":"https://github.com/amirmohsen","followers_url":"https://api.github.com/users/amirmohsen/followers","following_url":"https://api.github.com/users/amirmohsen/following{/other_user}","gists_url":"https://api.github.com/users/amirmohsen/gists{/gist_id}","starred_url":"https://api.github.com/users/amirmohsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amirmohsen/subscriptions","organizations_url":"https://api.github.com/users/amirmohsen/orgs","repos_url":"https://api.github.com/users/amirmohsen/repos","events_url":"https://api.github.com/users/amirmohsen/events{/privacy}","received_events_url":"https://api.github.com/users/amirmohsen/received_events","type":"User","site_admin":false},"labels":[{"id":245266161,"url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/labels/question","name":"question","color":"cc317c","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-11-04T23:32:54Z","updated_at":"2017-01-09T10:15:00Z","closed_at":null,"body":"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.\r\n\r\nI have managed to find a solution for my own usecase by using [react-measure](https://github.com/souporserious/react-measure) to watch the changes in the dimensions of the children and then triggering a state change to rerender the scrollbars component.\r\n\r\nHowever, it would be best if the scrollbars component handled this internally as it would match the behavior of the browsers' scrollbars.\r\n\r\nP.S. for the sake of others who may have the same issue, here's what I did with react-measure to solve the problem:\r\n\r\n```js\r\n<Scrollbars\r\n\t{...this.props}\r\n>\r\n\t<Measure\r\n\t\tonMeasure={dimensions => this.setState({dimensions})}\r\n\t>\r\n\t\t<div>\r\n\t\t\t{this.props.children}\r\n\t\t</div>\r\n\t</Measure>\r\n</Scrollbars>\r\n```"},"comment":{"url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/comments/271249232","html_url":"https://github.com/malte-wessel/react-custom-scrollbars/issues/98#issuecomment-271249232","issue_url":"https://api.github.com/repos/malte-wessel/react-custom-scrollbars/issues/98","id":271249232,"user":{"login":"malte-wessel","id":1020216,"avatar_url":"https://avatars.githubusercontent.com/u/1020216?v=3","gravatar_id":"","url":"https://api.github.com/users/malte-wessel","html_url":"https://github.com/malte-wessel","followers_url":"https://api.github.com/users/malte-wessel/followers","following_url":"https://api.github.com/users/malte-wessel/following{/other_user}","gists_url":"https://api.github.com/users/malte-wessel/gists{/gist_id}","starred_url":"https://api.github.com/users/malte-wessel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/malte-wessel/subscriptions","organizations_url":"https://api.github.com/users/malte-wessel/orgs","repos_url":"https://api.github.com/users/malte-wessel/repos","events_url":"https://api.github.com/users/malte-wessel/events{/privacy}","received_events_url":"https://api.github.com/users/malte-wessel/received_events","type":"User","site_admin":false},"created_at":"2017-01-09T10:15:00Z","updated_at":"2017-01-09T10:15:00Z","body":"@amirmohsen yes, actually this would be cool. But since the [https://wicg.github.io/ResizeObserver](Resize Observer) API is in an early stage, I don't want to ship this library with the polyfill. The polyfill actually just listens for the window resize event and then checks the dimensions of all observed elements. I guess this is not really performant.\r\nFor now I would encourage people to use [https://github.com/souporserious/react-measure](react-measure)."}}
{"actor":{"display_login":"malte-wessel"}}