2 scrollbars on MacOS Chrome #2

Hi all, I have the same problem on my macOS with Chrome, which was mentioned in #10 by @dnish

I checked and removed all overflow properties on parent blocks, add the max-height rule, but still have 2 scrolls.

code:

<CustomScroll heightRelativeToParent="calc(100%)">
    {this.renderList(predictions)}
</CustomScroll>

here is an online demo, look at Predictions block.

What I do wrong?

[rommguy]

@AnarH93 I found a solution for the issue, it’s not simple, as it involves changing the dom structure of the custom scroll, and might break previous usages if someone assumed a specific dom structure, in css selectors for example. I will publish a major version with the fix sometime next week, including tests for the changes.

I’ve pushed the fix to a branch for now, it’s not fully ready but should work. Can you please try and check if the it fixes the issue in your site ? To check:

• Clone the repo
• checkout mac-os-double-scroll branch
• run yarn start
• run npm link
• in your project directory, where the package.json is located, run npm link react-custom-scroll
• If you consume the customScroll.css from a cdn or something like that, you’ll need to get it from the local node_modules/react-custom-scroll folder to get the linked version.

To check if you got the correct css, after you reload your project with the fixed version, check that the div with class “positioning” (first child of outer-container) has position: relative.

[rommguy]

@AnarH93 I published version 3.0.0 with the fix. Please let me know if the issue persists. Also, I would appreciate if you could star this repo, thanks