Customizing Scrollbar Functionality

Recently, I have been working on customizing scrollbar behavior. However, I have encountered an issue where the scrollbar remains visible even when I am not actively scrolling. This was not the case before applying the below CSS code.

My expectation is that the scrollbar should only be visible when the user is actually scrolling.

  MuiCssBaseline: {
    styleOverrides: {
      body: {
        '-webkit-font-smoothing': 'subpixel-antialiased',
      },
      '*': {
        '&::-webkit-scrollbar': {
          width: '6px', // Adjusting width
        },
        '&::-webkit-scrollbar-track': {
          background: 'transparent', // Keeping track transparent
        },
        '&::-webkit-scrollbar-thumb': {
          background: '#BDBDBD', // Changing thumb color
          borderRadius: '80px', // Customizing border radius
        },
        '&::-webkit-scrollbar-thumb:hover': {
          background: '#A8A8A8', // Optional: Hover effect
        },
      },
cssreactjsmaterial-uiscrollbar

Answer №1

To achieve this effect, a combination of CSS and JavaScript is required.

First, let's start with the CSS part. Add a 'show' class to your stylesheet:

MuiCssBaseline: {
  styleOverrides: {
    body: {
      '-webkit-font-smoothing': 'subpixel-antialiased',
    },
    '*': {
      '&::-webkit-scrollbar': {
        width: '0', // Initially hide scrollbar
      },
      '&.show-scrollbar::-webkit-scrollbar': {
        width: '6px', // Display scrollbar when scrolling
      },
      '&::-webkit-scrollbar-track': {
        background: 'transparent',
      },
      '&::-webkit-scrollbar-thumb': {
        background: '#BDBDBD',
        borderRadius: '80px',
      },
      '&::-webkit-scrollbar-thumb:hover': {
        background: '#A8A8A8',
      },
    },
  },
}

Next, let's move on to the JavaScript part:

const scrollContainer = document.body; // You can also specify a different 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 certain delay
  scrollTimeout = setTimeout(() => {
    scrollContainer.classList.remove('show-scrollbar');
  }, 1000); // Adjust the delay time as needed (1 second in this case)
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintaining Existing Filters and Incorporating Additional Filters in React/Next.js Data Filtering

I'm currently facing a challenge with filtering data in React/Next.js. The issue I'm encountering is that whenever I set a new filter, the previous filters get removed. For instance, if a user performs a search, it works fine but the tag filters ...

javascriptreactjsreact-nativenext.js

The start screen fails to display when clicking the restart button

I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOut ...

javascripthtmlcssfunctionhtml-table

React Redux Material Design auto suggest suggestion box

Is anyone else encountering difficulties extracting values from Material-ui Autocomplete while using redux-form? I followed the example on the material-ui Autocomplete https://material-ui.com/components/autocomplete/. I can see the list options and they ...

react-reduxmaterial-uiredux-form

What is the best way to script a function that switches is_active from False to True?

Is there a way to create a function that switches is_active=False to True? I am looking to develop a function that can change the user status from is_active=False to is_active=True. Ultimately, my goal is to implement an "email verification" process for ne ...

pythonreactjsdjangodjango-rest-frameworkdjango-views

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

htmlcssalignment

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-widt ...

htmlcssinlinedisplay

Is it acceptable to utilize the "sticky-top" class in a mobile-friendly navigation bar?

I'm facing an issue with implementing the Sticky-top function on a navbar within a Django project. The navbar is responsive and can be expanded by clicking a button, but I want it to remain fixed at the top when the user scrolls down. Currently, I am ...

cssbootstrap-4

ReactJS Alert: It is advisable for each child in an array or iterator to possess a distinct "key" property

var divArr = [ '<div>布吉岛啊</div>', '<div>呵呵呵</div>', ]; ReactDOM.render( <div>{divArr}</div>, document.getElementById("example") ); but ...

reactjs

Which is better: experimenting with SSR in React js, or trying out Next js?

As I set out to develop a React app, I encountered a major obstacle in the form of the lack of Server Side Rendering (SSR) in React JS, a crucial element for SEO, sitemap organization, and page indexing within an app. Despite my efforts to find tutorials o ...

reactjsnode.jsmongodbexpressmern

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

Show drawer when modal is open in React Native

Currently, I am working on a project in react-native and facing an issue where the modal is appearing over the drawer navigator. Despite trying to adjust the zIndex property, it has not been effective. Details of my modal: <Modal visible={isVisible} ...

javascriptreactjsreact-nativeuser-interface

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

javascripthtmlcss

Navigating the loading of information with fetch and React Hooks

As a newcomer to React and still learning JavaScript, I am facing a challenge with handling useEffect alongside an asynchronous function. My goal is to fetch data from an API and render a quote in the paragraph with id of text, along with the author's ...

javascriptreactjsfetch-apiuse-effect

A guide on transferring a combination of text and image input data from a React front-end to an Express back-end using Multer

Whenever I attempt to send a request that includes both an image and text input from the user, it successfully reaches the backend with accurate data when using Postman. However, when I try to do the same from the React front-end, the request goes throug ...

reactjsexpressmulter

Setting the height of a child div: A step-by-step guide

Within a nested div with a height of 48px and positioned relatively, there is another child div also with a height of 48px. The goal is to set the maximum height of the child div to 80% and the minimum height to 40%. However, even after applying these sett ...

htmlcss

Ways to display distinct text boxes based on selected radio button?

Currently, I am working with JSP and have implemented an HTML form that includes a "Process" button at the top. When this button is clicked, it displays a form with two radio buttons - TestClient and TestServer. The form also contains a Submit button. If ...

javascriptjqueryhtmlcssforms

Encountering issues with loading JavaScript file in Reactjs

I'm currently working with Reactjs (Nextjs) and I am in the process of integrating the home page (index.js). I have various JavaScript files located in the "public" folder and I'm unsure of where to place them. Should I include these files in "_a ...

javascriptreactjsnext.js

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

javascripthtmlcss