Question

我在静态html页面中有一个jQuery滚动条。代码在独立时工作正常，但当放在我的网页中的div内时，它无法正常工作。

当您单击并拖动滚动条时，它不会选择滚动条，甚至不允许您拖动和滚动。但是，向上和向下箭头允许您滚动。偶尔多次点击后，您可以拖动滚动条。

任何想法！？

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

Answer 1

如果您发布的示例是正确的，那么您有一个额外的“+”符号。行之间

$（ '＃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});
      });

jQuery ScrollBar - 没有关注？

1 个答案: