jQuery ScrollBar - не фокусируется? - PullRequest
Новая
       5

jQuery ScrollBar - не фокусируется?

0 голосов
/ 28 августа 2009

У меня есть полоса прокрутки jQuery на статической HTML-странице. Код работает нормально, когда он автономен, но когда он помещен в 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;
}

1 Ответ

0 голосов
/ 11 сентября 2009

Если приведенный вами пример верен, то у вас есть дополнительный знак «+». Между строк

$ ( '# 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});
      });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...