te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to load Jquery Tiny scrollbar - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to load Jquery Tiny scrollbar - Stack Overflow

    javascript - How to load Jquery Tiny scrollbar - Stack Overflow

    programmeradmin3浏览0评论

    So I want to customize a scrollbar and I found tiny scrollbar, which is a jquery plugin:

    /

    The problem is, I can't get it to work no matter what. I included Jquery, and the jquery.tinyscrollbar.js files into the same folder as my html and css, as well as included them in the header section, but I can't get it to work...

    when I open the file via client side, all I get is the regular looking scrollbar as you can see below:

    Here's my code:

    HTML

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="scrolltest.css" />
    <script src="jquery.js"></script>
    <script src="jquery.tinyscrollbar.js"></script>
    <script>
        $(document).ready(function() 
            {
                $("#chatlist").tinyscrollbar();
            });
    </script>
</head>
<body>
    <div id="chatlist" >
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</body>
</html>

    CSS

        div#chatlist {
        width: 50px;
        height: 140px;
        border: 1px solid black;
        overflow:scroll;
     }

    Any help would be greatly appreciated!

    So I want to customize a scrollbar and I found tiny scrollbar, which is a jquery plugin:

    http://baijs.nl/tinyscrollbar/

    The problem is, I can't get it to work no matter what. I included Jquery, and the jquery.tinyscrollbar.js files into the same folder as my html and css, as well as included them in the header section, but I can't get it to work...

    when I open the file via client side, all I get is the regular looking scrollbar as you can see below:

    Here's my code:

    HTML

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="scrolltest.css" />
    <script src="jquery.js"></script>
    <script src="jquery.tinyscrollbar.js"></script>
    <script>
        $(document).ready(function() 
            {
                $("#chatlist").tinyscrollbar();
            });
    </script>
</head>
<body>
    <div id="chatlist" >
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</body>
</html>

    CSS

        div#chatlist {
        width: 50px;
        height: 140px;
        border: 1px solid black;
        overflow:scroll;
     }

    Any help would be greatly appreciated!

    • javascript
    • jquery
    • html
    • tinyscrollbar
    Share Improve this question edited Jan 27, 2013 at 10:11 r1nzler asked Jan 27, 2013 at 9:58 r1nzlerr1nzler 2,5338 gold badges29 silver badges31 bronze badges 6
    • 1 Open the console and check if you've got any errors. I see a syntax error in your script since you're not closing the ready function. – Julien Bourdon Commented Jan 27, 2013 at 10:08
    • Ahh sorry about that, I added the closing brackets, but nothing has changed ._. – r1nzler Commented Jan 27, 2013 at 10:11
    • So no error in the console? – Julien Bourdon Commented Jan 27, 2013 at 10:12
    • You can open the console by pressing F12 (FYI) – Joe M Commented Jan 27, 2013 at 10:21
    • I get this error inside the jquery.tinyscroll.js file: TypeError: oViewport.obj[0] is undefined. The plugin shouldn't have any bugs though ._. – r1nzler Commented Jan 27, 2013 at 10:23
     |  Show 1 more ment

    2 Answers 2

    Reset to default 9

    As explained in the official site, you need to define a scrollbar and a viewport class elements in your code. Try the HTML code below:

       <div id="chatlist">
   <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
   <div class="viewport">
        <div class="overview">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
        </div>
    </div>
    </div>

    And don't forget to amend your CSS as explained in the site too.

    #chatlist { width: 520px; clear: both; margin: 20px 0 10px; }
#chatlist .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
#chatlist .thumb .end,
#chatlist .thumb { background-color: #003D5D; }
#chatlist .scrollbar { position: relative; float: right; width: 15px; }
#chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#chatlist .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

    Using tinyscrollbar actually requires a bit of work. The things you need to do are: 1. You need to define a scrollbar, and a viewport div 2. You need to style them 3. You should get rid of overflow:scroll, as tinyscrollbar does not override the overflow functionality, and you'll get the default scrollbar alongside the tiny one.

    This is the code you should use:

        <html>
<head>
    <link rel="stylesheet" type="text/css" href="scrolltest.css" />
    <script type="text/javascript" src="http://code.jquery./jquery-latest.js" ></script>
    <script src="jquery.tinyscrollbar.js"></script>
    <script>
        $(document).ready(function () {
            $("#chatlist").tinyscrollbar();
        });
    </script>
    <style>

         #chatlist { width: 50px; height:140px; border:1px solid black;  }
        #chatlist .viewport { width: 50px; height: 140px; overflow: hidden; position: relative; }
        #chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
        #chatlist .thumb .end,
        #chatlist .thumb { background-color: #003D5D; }
        #chatlist .scrollbar { position: relative; float: right; width: 15px; }
        #chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
        #chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
        #chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
        #chatlist .disable{ display: none; }
        .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
    </style>
</head>
<body>
    <div id="chatlist" >
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
            <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
        </div>
    </div>

    </div>

</body>
</html>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论