How to disable scrollbar without hiding using jQuery ?

28 Nov, 2019
A vertical or horizontal bar that is located at the corners of the page helps us to scroll the pages or containers upwards, downwards or sideways. So, the process is to disable the scroll bar but the scroll bar should be visible. In this article, we will disable the scroll bar by using .on() function. With the click of the button, we will make the scroll-bar visible but disable.
Disable using jQuery with a button: Here once we disable the scroll event the scroll won’t work whether we want to make the scrollbar visible or not. We gonna trigger the disable function with the click of the button.
Syntax:
$(“selector”).on(event, function)
Example: This example illustrates the approach of disabling the scroll using visibility.
<!DOCTYPE html><html>  <head>    <title>        How to disable scrollbar without        hiding using jQuery?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>          <script>              // On click of button the scroll        // gets disabled, still visible.        $(document).ready(function() {            $("button").click(function() {                $("p").text("Scroll-bar is disabled"                        + " but still visible.")                $('#element').on("mousewheel touchmove",                        function(e) {                    e.preventDefault();                });            });        });    </script>          <style>              /*visible active scrollbar*/        #element {            height: 150px;            width: 400px;            border: 2px solid black;            overflow: scroll;        }    </style></head>  <body>    <center>        <h1 style="color: green">GeeksforGeeks</h1>        <h3>A Computer Science portal for Geeks</h3>                  <div id="element">                          <b style="font-size:26px;">jQuery:</b>                          <article style="font-size:18px; text-align:left;">                jQuery is an open source JavaScript library                 that simplifies the interactions between an                HTML/CSS document, or more precisely the                Document Object Model (DOM), and JavaScript.                Elaborating the terms, jQuery simplifies HTML                document traversing and manipulation, browser                 event handling, DOM animations, Ajax interactions,                and cross-browser JavaScript development.            </article>        </div>        <br>                  <button>Click</button>        <p style="color:red"></p>    </center></body>  </html>
Output:
Before clicking the button scroll is working:
After clicking the button scroll is not working:
Note: Mouse scroll is disabled but if you click scroll down or up button, the frame will shift.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
jQuery | children() with Examples
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?