Scrollbar will not work if Mac OS show scrollbars is not set to Always -- also workaround for mobile scrollbars
See original GitHub issue``
** custom component **
import React, { Component } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'
import '../css/components/custom-scrollbar.css'
export default class CustomScrollbars extends Component {
render () {
console.log(this.props)
return (
<Scrollbars
renderTrackVertical={props => <div {...props} className='track-vertical' />}
renderThumbVertical={props => <div {...props} className='thumb-vertical' />}
{...this.props}
>
{this.props.children}
</Scrollbars>
)
}
}
** CSS **
.track-vertical {
position: absolute;
width: 6px;
right: 2px;
bottom: 2px;
top: 2px;
border-radius: 3px;
border: solid 1px #857364;
}
.thumb-vertical {
position: relative;
display: block;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: inherit;
background-color: #857364;
}
** implementation of component **
<CustomScrollbars
autoHeight
autoHeightMin={100}
autoHeightMax={200}
hideTracksWhenNotNeeded
>
{this.createAccContent(data.articles)}
</CustomScrollbars>
I swear i had this working last night before i restarted my computer… Anyway for the life of me i can’t get it to show on screen. When i inspect for the elements they are there but track-vertical is always set to display: none ( even if i remove the hideTracksWhenNotNeeded) and when i click display: none off in the chrom inspector it shows up but the thumb does not track and i see the native scroll instead.
I’ve been staring at this for several hours now and i would appreciate any thoughts. Like i said i had it working yesterday and don’t know why it stopped… #
Issue Analytics
- State:
- Created 7 years ago
- Comments:10 (1 by maintainers)
Top Results From Across the Web
CSS - Overflow: Scroll; - Always show vertical scroll bar?
I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the...
Read more >Always Show Scroll Bars in Mac OS X | OSXDaily
The scrollbars in new versions of Mac OS X are hidden until activated by use, that is, by scrolling, making them invisible by...
Read more >How to Configure Scroll Bars in macOS and OS X - Lifewire
Go to the Apple menu and select System Preferences > General > Show Scroll Bars. Check Always, When Scrolling, or Automatically.
Read more >You want overflow: auto, not overflow: scroll | Kilian Valkhof
Go to System Preferences, then General and toggle “Show scroll bars” to “Always”.
Read more >Vertical Scroll Bar Missing From Toolbars on a Mac
If you are using a Mac computer while working with Constant Contact, and your scroll bar has been disappearing in certain windows or ......
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 FreeTop 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
Top GitHub Comments
if you put this in your css you will have a custom scrollbar no matter the MacOS setting AND it will work in mobile browsers
ughghhhh so i don’t even know what was wrong with my implementation but i tried some other approaches and got similar results. I went and did a cmd + z to get it all back to how i had it here… and the shit started working… don’t know why but happy it’s working again.