使用jquery.sly.js模拟垂直导航滚动条效果

文章内容

jquery.sly.js 是一个可实现内容滚动幻灯片的 jQuery 插件，支持显示图片、文字等其它 HTML 元素。它提供了滚动条、前后浏览按钮等多种导航方式， 并且内置了不同的导航逻辑，可让你打造出非常给力的内容滚动效果。同时它还提供了水平和垂直两种滚动方式。 本文分享一个垂直的内容滚动条效果

关键代码

<script type="text/javascript">
    var scrollBar = function () {
        $(document).on('activated', function (event) {
            var $section = $(".scrollbox");
            $scrollbar = $section.find('.scrollbar');
            $section.find(".slyWrap").each(function (i, e) {
                var cont = $(this),
                    frame = cont.find(".sly"),
                    slidee = frame.find("ul"),
                    scrollbar = cont.find(".scrollbar"),
                    options = frame.data("options");

                options = $.extend({}, options, {
                    scrollBar: scrollbar,
                    disabledClass: 'btn-disabled'
                });
                frame.sly(options);
            });
        }).trigger('activated');
    }
    $(window).load(function () {
        scrollBar();
    });
</script>