Question

我们正在使用scrollpane.js进行滚动

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Youngib Command Line Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>
        <script src="js/scrollpane.js" type="text/javascript"></script>

        <link rel="stylesheet" href="css/jquery.jscrollpane.css" type="text/css" />
        <style>
    #data
    {
      width: 500px;
      height: 200px;
      overflow: auto;
      float:left;
    };
    .scroll1{
      float:left;
    }
        </style>
    <script>
    $(function(){
    var api = $('.scroll').jScrollPane(
                    {
                        showArrows:true,
                        maintainPosition: false
                    }
                ).data('jsp');
    $("#button").click(function(){
      alert("here i want to append into data div ");
     //  var scroll=$('.scroll').jScrollPane();
      api.getContentPane().append('<p>radfsf Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>');
    });
        api.reinitialise();
  });
    </script>
</head>
<body>
<div id="data" class="scroll">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt. Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum. Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius, est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus liber

consectetur adipiscing elit.
</p>
</div>
<div id="data" class="scroll1">
</br>
</br>
</br>
</br>
</br>
</br>
<input id="button" value="button" type="button">
</div>
</body>
</html>

它附加了p标记，但滚动不适用于附加的div。请建议如何正确滚动。

Answer 1

请试试这个

<script>
    $(function(){
    var api = $('.scroll').jScrollPane(
                    {
                        showArrows:true,
                        maintainPosition: false
                    }
                ).data('jsp');
    $("#button").click(function(){
      alert("here i want to append into data div ");
     //  var scroll=$('.scroll').jScrollPane();
      api.getContentPane().append('<p>...</p>');
      $('.scroll').jScrollPane(
                    {
                        showArrows:true,
                        maintainPosition: false
                    }
                )
    });
  });
    </script>

Answer 2

效果很好。以下是我在div中重新加载html的修改：

function mod_notif_load_notif(){

    var params = "";
    $(document).ready(function(){
        $.ajax({
            type: "POST",
            url: root+"modules/mod_notif/load_basic.php",
            data: params,
            success:function(result){

                var api = $('#mod_notif').jScrollPane(
                    {
                        showArrows:false,
                        maintainPosition: true
                    }
                ).data('jsp');

                api.getContentPane().html(result);
                $('#mod_notif').jScrollPane(
                    {
                        showArrows:false,
                        maintainPosition: true
                    }
                )

            }
        });
    });
}

如何使用jscrollpane追加div

2 个答案: