- 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 2: This example hides the scrollbar on the image.
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.
- Hide scroll bar, but while still being able to scroll using CSS
- p5.js | hide() Function
- CSS | scroll snap
- CSS | Scroll Padding top
- CSS | Scroll Padding
- AngularJS | ng-hide Directive
- Define ng-if, ng-show and ng-hide
- How to Hide a Folder in Windows?
- jQuery | hide() with Examples
- How to scroll window using jQuery ?
- jQuery | scroll() with Examples
- CSS | Scroll Padding bottom
- CSS | Scroll Snap stop
- CSS | Scroll Snap type
- CSS | scroll-behavior Property
- How to hide the bullets on list for the sidebar?
- How to hide an element when printing a web page using CSS?
- How to hide elements in responsive layout using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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 : shuchika