1

I need to hide the scrollbars for a div component while still retaining scrolling functionality. I used webkit for this as follows :

const styles = {
    noscroll:{
        '&::webkit-scrollbar':{
            width:'0rem',
            height:'0rem'
        }
    }
}

and then call it in my code as 

<ScrollSyncPane style={styles.noscroll} id="noscroll">
    <Grid
        style={styles.noscroll} 
        cellRenderer={this.headerRenderer}
        columnCount={colm[0].length}
        columnWidth = {150}
        height = {70}
        rowCount = {colm.length}
        rowHeight = {70}
        width = {1250}
    />
</ScrollSyncPane>

As per suggestions I read on SO I replaced '&' with '*' and even wrote the JSS as 

scrollbar:{
    width:0,
    height=0
}

inside noscroll object in styles. But none of this seems to work. Is it because it is a ScrollSync component?

kenneth-rebello
  • 914
  • 1
  • 7
  • 13
  • Does this answer your question? [How do I apply vendor prefixes to inline styles in reactjs?](https://stackoverflow.com/questions/32100495/how-do-i-apply-vendor-prefixes-to-inline-styles-in-reactjs) – Chaurasia Nov 30 '19 at 11:24
  • import styled from 'styled-components'; const Div = styled.div` margin: 40px; border: 5px outset pink; &:hover { background-color: yellow; } `; – LDS Nov 30 '19 at 12:07

0 Answers0