覆盖滚动条行为

Question

我正在尝试覆盖滚动条行为。当我应用下面的代码时，即使我没有滚动，滚动条也会变得可见。这意味着如果有滚动条它总是可见的。在应用下面的 css 之前，情况并非如此。

我期望滚动条仅在用户滚动时才可见

  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
        },
      },

Answer 1

您必须结合使用 CSS 和 JS。

对于CSS，添加一个显示类

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',
      },
    },
  },
}

对于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)
});