基於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具體代碼。你們能夠看代碼中。相對簡單。我就不舉例了