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

게시 한 예가 맞으면 '+'기호가 추가됩니다. . 라인

$ ('#의 pane3') JScrollPane의 사이 (); .

및

$ ('#의 pane4')가 JScrollPane ({scrollbarOnLeft : TRUE});

는 '+'추가이다. 그래서 거기에 실제로있다 : 문제를 도움이 될 수 없습니다

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

을, 당신이 수 있지만, 그 '+'삭제해야하거나 원인을 문제가되지 않을 수 있도록. 그것이 작동하는지

$(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 - 집중하지 않습니까?

답변

관련 문제