Question

我正在使用jscrollpane jquery插件应用于弹出div框（简称灯箱），但是jscrollpane滚动条没有显示出来。这是html：

{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">                                                                 
<head>                                                                  
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.jscrollpane.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "sample1.css"></link>        
<script type="text/javascript">
 $( document ).ready( function( )  
  {   
   $( function( )   
   {
    $( '#testing2' ).jScrollPane( );
   }); 

   $( "#testing" ).click( function( )  
   {
    $( "#testing2" ).show( 5000 );   
   }); 
  }      
 );    
</script> 
</head>                                                                 
<body>  
 <div id = "wrapperdiv">  
  <a id = "testing" href="#">Link</a>   
  <div id = "testing2">  
   lksjflksjdlkflskdjflksjdflkjslkjdflk
   lsdkflksjgliowtjlskdfjlskdfjlskgs
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs  
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
   lksjflksjdlkflskdjflksjdflkjslkjdflk 
   lsdkflksjgliowtjlskdfjlskdfjlskgs 
   lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
   lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
   llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
  </div> 
 </div> 
</body>                                                                 
</html> 
}

这是css：

*
{
 padding:  0px;
 margin:   0px;
}

#wrapperdiv
{
 width:   1000px;
 margin:   500px auto 0px auto;
}

#testing 
{ 
 width:   100px;
 height:   50px;  
 border:   1px solid;
 font-size:  22px;   
 display:  block;
 text-align:  center;
 padding:  25px 0px 0px 0px;
}

#testing2
{
 display:  none;
 width:   270px;
 height:   300px; 
 background:  yellow;
 border:   1px solid;  
 bottom:   100px;
 left:   10%;
 position:  relative; 
 z-index:  999;
}

Answer 1

jScrollPane不适用于初始化时不可见的项目。这是因为它无法计算它的大小。因此，您需要在显示内容后重新初始化jScrollPane，如下例所示：

http://jscrollpane.kelvinluck.com/invisibles.html

可以将回调作为jQuery show的第二个参数提供，以便您可以替换：

$( "#testing2" ).show( 5000 );

使用：

$( "#testing2" ).show(
    5000,
    function() // callback function
    {
        $('#testing2').jScrollPane();
    }
);

作为旁注，HTML中=符号周围的空格可能会阻止它验证...

Answer 2

有几件事要尝试：

如果我没记错，元素必须具有css属性

 overflow:auto;

应用所以将其粘贴到你的css中以进行＃testing2

问题是因为您的定位元素已隐藏，因此您可以尝试在show函数后初始化scrollPane：

  $(document).ready(function() {   

       $('#testing').click(function(){

           $('#testing2').show(5000, function(){
               $('#testing2').jScrollPane();
           });   

       });

    });

尝试不隐藏元素，看看是否正常。

另请查看以下链接 - 评论5：http://code.google.com/p/jscrollpane/issues/detail?id=30

This ('#myDiv').show().jScrollPane() fix worked perfectly for me.

在这种情况下我的上述代码将成为

   $(document).ready(function() {   

   $('#testing').click(function(){

       $('#testing2').show(5000).jScrollPane();  

   });

});

和http://jscrollpane.kelvinluck.com/invisibles.html - 解释了在不可见元素上使用它

用于弹出框问题的Jscrollpane插件

2 个答案: