I am trying to override scrollbar behaviour . when I apply below code scrollbar is getting visible even if I am not scrolling . Meaning its always visible if there is scrollbar. before apply below css that was not the case .
I am expecting that scroll bar should be only visible when user is scrolling
MuiCssBaseline: {
styleOverrides: {
body: {
'-webkit-font-smoothing': 'subpixel-antialiased',
},
'*': {
'&::-webkit-scrollbar': {
width: '6px', // Customize width
},
'&::-webkit-scrollbar-track': {
background: 'transparent', // Keep track transparent or default
},
'&::-webkit-scrollbar-thumb': {
background: '#BDBDBD', // Customize thumb color
borderRadius: '80px', // Customize border radius
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#A8A8A8', // Optional: Change thumb color on hover
},
},
You will have to use a combination of CSS and JS.
For CSS, add a show class
MuiCssBaseline: {
styleOverrides: {
body: {
'-webkit-font-smoothing': 'subpixel-antialiased',
},
'*': {
'&::-webkit-scrollbar': {
width: '0', // Start with hidden scrollbar
},
'&.show-scrollbar::-webkit-scrollbar': {
width: '6px', // Show scrollbar when scrolling
},
'&::-webkit-scrollbar-track': {
background: 'transparent',
},
'&::-webkit-scrollbar-thumb': {
background: '#BDBDBD',
borderRadius: '80px',
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#A8A8A8',
},
},
},
}
For JS
const scrollContainer = document.body; // or specific scrollable container
let scrollTimeout;
scrollContainer.addEventListener('scroll', () => {
// Add class to show scrollbar
scrollContainer.classList.add('show-scrollbar');
// Clear previous timeout to reset the delay
if (scrollTimeout) {
clearTimeout(scrollTimeout);
}
// Remove the class to hide scrollbar after a delay
scrollTimeout = setTimeout(() => {
scrollContainer.classList.remove('show-scrollbar');
}, 1000); // Adjust the timeout (1 second in this case)
});