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.

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:closed
  • Created 7 years ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

17reactions
Mikeks81commented, Feb 21, 2017

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

::-webkit-scrollbar {
    min-width: 1px;
    min-height: 1px;
}
1reaction
Mikeks81commented, Feb 18, 2017

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.

Read more comments on GitHub >

github_iconTop 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 >

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