Ruby's Louvre

每天学习一点点算法

导航

mass Framework scrollbar模块

这是外围模块,里面是专门处理滚动条的工具方法

define("scrollbar", ["css"], function($) {
    function hasScrollBar(target, key) {
        //判定是否存在水平或垂直滚动条
        var val = target.css('overflow-' + key)
        if(val == 'scroll') return true;
        if(val == 'hidden') return false;
        if(val == 'auto') {
            var el = target[0],
                method = key == 'y' ? 'Height' : 'Width';
            return el['client' + method] < el['scroll' + method];
        }
        return false
    }
    $.fn.hasScrollBar = function() {
        //判定当前匹配的第一个元素是否存在滚动条
        return isDisplayScrollBar(this, 'x') || isDisplayScrollBar(this, 'x');
    }
    $.getDefaultScrollBarWidth = function() {
        //取得当前窗口默认的滚动条的宽度
        if($.getDefaultScrollBarWidth.ret) {
            return $.getDefaultScrollBarWidth.ret
        }
        var test = $('<div style="width: 100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;"/>').appendTo("body");
        var ret = test[0].offsetWidth - test[0].clientWidth;
        test.remove();
        return $.getDefaultScrollBarWidth.ret = ret;
    }
    $.getScrollBarWidth = function(node) {
        //获取当前元素的滚动条的消息
        var target = $(node),
            width = $.getDefaultScrollBarWidth();
        return {
            x: hasScrollBar(target, 'x') ? width : 0,
            y: hasScrollBar(target, 'y') ? width : 0
        }
    }
    return $;
});

posted on 2013-01-29 12:41  司徒正美  阅读(1159)  评论(0编辑  收藏  举报