<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to disable scrollbar without
hiding using jQuery?
</
title
>
<
script
src
=
</
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
>