jQuery ScrollBar - Pas de mise au point?

J'ai une barre de défilement jQuery dans une page html statique. Le code fonctionne bien quand il est autonome, mais lorsqu'il est placé à l'intérieur d'un div dans ma page Web, il ne fonctionne pas correctement.jQuery ScrollBar - Pas de mise au point?

Lorsque vous cliquez et faites glisser la barre de défilement, elle ne sélectionne pas la barre de défilement et ne permet même pas de faire glisser et de faire défiler. Cependant, les flèches haut et bas vous permettent de faire défiler. Parfois, après plusieurs clics, il vous permettra de faire glisser la barre de défilement.

Des idées!?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
     <title>jScrollPane example skins (operating system style scrollbars)</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" media="all" href="css/stylesheet.css" /> 
     <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" /> 
     <script type="text/javascript" src="js/jquery.min.js"></script> 

     <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
     <script type="text/javascript" src="js/jScrollPane.js"></script> 
     <style type="text/css"> 


     </style> 
     <script type="text/javascript"> 

      $(function() 
      { 
       // this initialises the demo scollpanes on the page. 
       $('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17}); 
       $('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16}); 
       $('#pane3').jScrollPane(); 
+    $('#pane4').jScrollPane({scrollbarOnLeft:true}); 
      }); 

     </script> 
    <script src="/mint/?js" type="text/javascript"></script> 
</head> 
    <body> 


      <h3>#pane5 (normal OS provided)</h3> 
      <div id="pane4" class="scroll-pane"> 
       <p>&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimecelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.&lt;</p> 

      </div> 
     </div> 
    </body> 
</html> 


#pane1, #pane2, #pane3, #pane4 { 
height:200px; 
} 
jScrollPane.css (line 67) 
.scroll-pane { 
background-color:#FFFFFF; 
float:left; 
height:538px; 
left:0; 
overflow:auto; 
padding-left:2px; 
position:absolute; 
top:0; 
width:635px; 
} 
stylesheet.css (line 181) 
html, div, map, dt, isindex, form { 
display:block; 
}

Source

2009-08-28 Goober

Si l'exemple que vous avez posté est correct, alors vous avez un signe '+' supplémentaire. Entre la ligne

$ ('# pane3') .jScrollPane(); .

$ ('# pane4') JScrollPane ({scrollbarOnLeft: true});

est un '+' supplémentaire. Donc là, il est en fait:

$('#pane3').jScrollPane(); 
+    $('#pane4').jScrollPane({scrollbarOnLeft:true});

Cela ne peut pas être aider les choses, vous devez donc supprimer que « + », si elle peut ou ne peut pas être la cause de votre problème.

En outre, vous pouvez essayer d'emballer vos javascript dans:

$(document).ready(function() { ... });

Je ne sais pas si cela va fonctionner, mais il est possible que votre exécution du code avant que les éléments DOM HTML sont chargés. Je peux me tromper, cependant.

Exemple:

$(document).ready(function() { 
     // this initialises the demo scollpanes on the page. 
     $('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17}); 
     $('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16}); 
     $('#pane3').jScrollPane(); 
     $('#pane4').jScrollPane({scrollbarOnLeft:true}); 
     });

Source

2009-09-11 02:55:05

jQuery ScrollBar - Pas de mise au point?

Répondre

Questions connexes