如何使用 jscrollpane 追加到 div 中

发布于 2024-11-19 14:33:01 字数 4036 浏览 5 评论 0原文

我们使用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。请建议如何正确滚动。

原文

We are using scrollpane.js for scrolling

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

it is appending the p tag but scrolling is not working with the appended div.
Please suggest what to do for proper scrolling.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜吻♂芭芘 2024-11-26 14:33:01

请尝试这个

<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>

Please try this

<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>

回复收藏 0 原文

装纯掩盖桑 2024-11-26 14:33:01

效果很好。以下是我对其进行的更改，以使其重新加载 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
                    }
                )

            }
        });
    });
}

It worked well. Here are my alterations to get it to reload the html in a div:

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
                    }
                )

            }
        });
    });
}

回复收藏 0 原文

~没有更多了~