jQuery ScrollBar - 不重點？

我有一個靜態html頁面的jQuery滾動條。當代碼獨立時，代碼工作正常，但是當放置在網頁中的div內時，代碼無法正常工作。jQuery ScrollBar - 不重點？

當你去點擊並拖動滾動條時，它不會選擇滾動條，它甚至不會讓你拖動和滾動。但是，向上和向下箭頭允許您滾動。偶爾多次點擊後，它將允許您拖動滾動條。

任何想法！？

<!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; 
}

來源

2009-08-28 Goober

如果你發佈的例子是正確的，那麼你有一個額外的'+'號。 between行

$（'＃pane3'）。jScrollPane（）; 。

和

$（ '＃pane4'）JScrollPane的（{scrollbarOnLeft：真}）;

是一個額外的'+'。所以它實際上是：

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

這不能幫助事情，所以你應該刪除「+」，雖然它可能會或可能不會引起你的問題。

另外，你可以嘗試在一個包裹你的JavaScript：

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

我不知道這是否會工作，但你的執行代碼加載的HTML DOM元素之前，這是可能的。但是我可能是錯的。

實施例：

$(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}); 
     });

來源

2009-09-11 02:55:05

jQuery ScrollBar - 不重點？

回答

相關問題