Una barra vertical u horizontal que se encuentra en las esquinas de la página nos ayuda a desplazar las páginas o contenedores hacia arriba, hacia abajo o hacia los lados. Entonces, el proceso es deshabilitar la barra de desplazamiento, pero la barra de desplazamiento debería estar visible. En este artículo, deshabilitaremos la barra de desplazamiento usando la función .on() . Con el clic del botón, haremos visible la barra de desplazamiento pero la desactivaremos.
Deshabilitar el uso de jQuery con un botón: aquí, una vez que deshabilitamos el evento de desplazamiento, el desplazamiento no funcionará, ya sea que queramos que la barra de desplazamiento sea visible o no. Vamos a activar la función de desactivación con el clic del botón.
Sintaxis:
$(“selector”).on(event, function)
Ejemplo: este ejemplo ilustra el enfoque de deshabilitar el desplazamiento mediante la visibilidad.
<!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>
Producción:
- Antes de hacer clic en el botón, el desplazamiento está funcionando:
- Después de hacer clic en el botón, el desplazamiento no funciona:
Nota: el desplazamiento del mouse está deshabilitado, pero si hace clic en el botón de desplazamiento hacia abajo o hacia arriba, el marco se desplazará.