Vertical Scrollbar not appearing on first load

[aprilmintacpineda]

When the page first loads, the vertical scrollbar is not present, it's just not there until you actually scrolls it that's the moment when the scrollbar appears.

Shouldn't it be visible even at first load?

here is how I did it.

<div className="post-right">
    <ReactScrollbarJS
            style={{
                height: '100%',
                width: '100%'
            }}
            speed={100}
        >
        <p className="section-title">You may also like</p>
        {this.props.related_posts.length > 0? this.props.related_posts.map((post, i) =>
            <div className="related-post-wrapper" key={i}>
                <img src={settings.storage_path + '/images/' + post.cover_image} />
                <Link to={'/post/' + post.public_id}>{post.title}</Link>
            </div>
        ): <p>There are no related posts to show.</p>}
    </ReactScrollbarJS>
</div>

[usulpro]

I guess it could be a problem if your child components don't have enougth heigh while initial rendering and then you update them dynamically. If I'm right could you try to scrollToY(0) after that?

[alaindresse]

I solve this issue by adding a key to the Scrollbar component based on the content. For the example above for example, I would try

<ReactScrollbarJS key={this.props.related_posts.length} ...

to ensure that the scrollbar is re-rendered when new content is added.

Alain

[aprilmintacpineda]

@alaindresse unfortunately, your solution of adding a key prop to it doesn't work. I get the same output.

@UsulPro I honestly got confused with what you said, I am thinking that I should do scrollToY(0) after dynamically loading the contents, but then how should I add that to my code since I'm doing all this in the return ().

[aprilmintacpineda]

can you guys please also attend to my other issue #14 because I always get that warning and it's kinda freaking me out.

[usulpro]

@four-eyes-04-04 It's hard to check your code without full repo. If you show your project with this issue I could look at it

[aprilmintacpineda]

@UsulPro I really would love to but it's a private repo, I can't share any more codes with this issue...