How to hide scroll bar for inactivity?

There are many ways to hide the scroll bar when the page is inactive. One such way is using the onscroll, onmousewheel, onclick and onmousemove events, which help us to achieve our goal using basic HTML and JavaScript.

Approach:

  • The onscroll event is used to disable the scroll bar.
  • The onscroll event acts as soon as the page is scrolled. So, setTimeout() method is used to provide a delay to hide the scroll bar, so that we are able to scroll down first.
  • The time can be adjusted according to our requirement.
  • onmousemove event is used to enable scrolling as soon as the mouse pointer is moved. onclick event is used to enable scrolling as soon as the user clicks. onmousewheel event is used to enable scrolling as soon as the page is scrolled down. Thus, these events help us to enable scrolling when the page becomes active again.

Example 1: As soon as the mouse moves, the mouse is scrolled, or the user clicks, the enableScrolling() function is called which allows us to scroll down. When the user tries to scroll down, the disableScrolling() function is called, which makes the scroll bar disappear after 1000ms. This time can be varied. To enable the scroll bar again, move the mouse pointer, or click, or scroll the mouse pointer to call the enableScrolling() function. The styling of the text has been done using the ‘style’ tag. The HTML and JavaScript code is as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>
        How to hide scroll bar
        for inactivity?
    </title>
      
    <style>
        p {
            font-size: 2rem;
        }
    </style>
</head>
  
<body onscroll="disableScrolling()" 
        onmousewheel="enableScrolling()" 
         onclick="enableScrolling()"
          onmousemove="enableScrolling()">
      
    <p>
        Geeks for Geeks is a Computer Science
        Portal created with the goal of
        providing well written, well thought
        and well-explained solutions for
        selected questions. Geeks for Geeks 
        has covered everything, ranging from
        algorithms and data structure courses
        to competitive exam preparation courses. 
        Geeks for Geeks is in true sense a
        a haven for geeks, where Tech lovers can
        come together and share their knowledge.
    </p>
  
    <script>
      
        // JavaScript code
        function disableScrolling() {
            setTimeout(function() {
                document.body.style.overflow = 'hidden';
            }, 1000);
        }
          
        function enableScrolling() {
            document.body.style.overflow = '';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Example 2: This example hides the scrollbar on the image.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>
        How to hide scroll bar
        for inactivity?
    </title>
  
    <style>
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 150%;
        }
    </style>
</head>
  
<body onscroll="disableScrolling()" 
        onmousewheel="enableScrolling()" 
         onclick="enableScrolling()"
          onmousemove="enableScrolling()">
  
    <img src=
  
    <script>
      
        // JavaScript code
        function disableScrolling() {
            setTimeout(function() {
                document.body.style.overflow = 'hidden';
            }, 1000);
        }
          
        function enableScrolling() {
            document.body.style.overflow = '';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

The main disadvantage of hiding the scroll bar for inactivity is that as soon as the scrollbar hides, the contents of the body ‘jump’ to fill up the space that was occupied by the scrollbar. Thus, it does not appear very appealing to the user.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shs_