Intentando que JScrollPane funcione con el elemento div

StackOverflow https://stackoverflow.com/questions/634541

  •  10-07-2019
  •  | 
  •  

Pregunta

¿Alguien tiene suerte de que JScrollPane funcione con JQuery?

Estoy siguiendo las instrucciones al pie de la letra y todo lo que sucede es que cuando se carga la página, la llamada simplemente oculta la barra de desplazamiento del navegador pero no muestra la barra de desplazamiento personalizada.

Archivos incluidos en la página HTML de prueba:

http://70.85.188.226/_assets/css/jscrollpane.css

http://70.85.188.226/_assets/js/jquery-1.2.3.min.js

http://70.85.188.226/_assets/js/jscrollpane.js

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/_assets/css/jscrollpane.css" media="screen,projection,print" />  
<script type="text/javascript" src="/_assets/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/_assets/js/jscrollpane.js"></script> 
<style type="text/css">
#test
{
    width:400px;
    height:300px;
    overflow:auto;
    background-color:#2b2b2b;
    color:#ffffff;
}
</style>
<script type="text/javascript">
    $(function()
    {
        $('#test').jScrollPane();
    });
</script>
</head>
<body>
<div id="test">
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST</div>
    <div style="clear:both;"></div>
    <div style="height:36px;">TEST12</div>
    <div style="clear:both;"></div>
</div>
</body>
</html>
¿Fue útil?

Solución

Puede ser porque te falta la declaración de clase requerida para tu div de prueba.

Para aplicar jScrollPane, debe establecer la clase para el div de prueba en '' scroll-pane ''.

Otros consejos

Verifique la línea 50 del archivo JavaScript jScrollPane. 

if (percentInView < .99) {

Esto me estaba causando un problema,

I console.log () 'es su valor y siempre regresaba por encima de .99, por lo que nunca agregaba los elementos de desplazamiento. Predigo que esto podría tener algo que ver con la configuración de mi CSS. Recomiendo mirar tu CSS.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top