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 - 不重点？

回答

相关问题