基于Jquery的textarea滚动条插件(原创)

之前项目中自己写的滚动条插件。先前太忙没有好好整理。现在项目间歇期拿出来整理后贴出来

 

Demo Here

 

css 我是把mCustomScrollbar 的UI 扣下来的。 这里我要介绍下这个插件不错。可以满足日常使用

 

js 没有啥困难的demo中都有。

 

其中有一些关键方法我举出来

1:addStyle

var addStyle = function($dom,addStyleObject) {
            var sStyle      = $dom.attr('style'),
                aStyle      = sStyle ? sStyle.split(';') : [],
                oStyle      = {},
                aFinalstyle = [];
            for (var i = 0; i < aStyle.length; i++) {
                var sPerStyle = aStyle[i];
                if(sPerStyle) {
                    var sAttr = $.trim(sPerStyle.split(':')[0]);
                    if(typeof(addStyleObject[sAttr]) != 'undefined') {
                        oStyle[sAttr] = addStyleObject[sAttr];
                    }
                }
            }
            var oNewStyle = $.extend(addStyleObject,oStyle);
            for (var i in oNewStyle) {
                if (oNewStyle.hasOwnProperty(i)) {
                    aFinalstyle.push(i+':'+oNewStyle[i]+';');
                }
            }
            $dom.attr('style',aFinalstyle.join(''));
        };

jquery 中我们不要使用$(dom).css({width:'100','height':'200'}); 这样会导致多次重绘。$(dom).attr('style','width:100px;height:200px;'});这样更好

 

其他的就是计算滚动条的height与top值，以及textarea的scrollHeight具体代码。大家可以看代码中。相对简单。我就不举例了