Ajax鼓吹浏览器滚动条效益

职责需要:由于不同浏览器对滚动条的体解析是差距,为联合样式风格,增加整体美程度,需要贯彻自定义滚动条。

首先种植方案:CSS设置滚动条样式。(目前只有Chrome浏览器支持,火狐不支持)

体说明:

        CSS
    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

Ajax 1

::-webkit-scrollbar        滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button      滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece        内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner               边角
::-webkit-resizer                       定义右下角拖动块的样式

 

第二种植方案:由于CSS设置滚动条才生谷歌浏览器支持,所以引入jquery第三着扩大插件nicescroll.js并针对性该展开封装成AngularJs指令使其更方便使用。

1、 引入外部文件

  <script src=”js/jquery.js”></script>

      <script src=”js/jquery.nicescroll.min.js”></script>

     
 nicescroll是因jquery的恢宏,此处需要先引入jquery再引入nicescroll。

   封装的ng-scroll指令代码如下:

    angular.module('ng.Scroll', [])
    .provider('$scroll', function(){
        var $$options = {
            cursorcolor: "#008fd4",//改变滚动条颜色,使用16进制颜色值
            cursoropacitymax: 0.2, //当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
            cursorwidth: "4px", //滚动条的宽度,单位:便素
            cursorborder: "0", //     CSS方式定义滚动条边框
            cursorborderradius: "2px",//滚动条圆角(像素)
            autohidemode: false //隐藏滚动条的方式
        };
        //调用scrollProvider为整个项目配置统一的滚动条风格
        this.setOptions = function(options) {
            angular.extend($$options, options);
        };
        this.$get = function() {
            return {
                getOptions:function(){ //返回配置对象的一个拷贝
                    var defaultOptions={};
                    angular.copy($$options,defaultOptions);
                    return defaultOptions;
                }
            };
        }
    })
    .directive('ngScroll', ['$scroll', function ($scroll) {
        return {
            restrict: 'A',
            link: _link
        };
        function _link(scope, iElement, iAttrs)
        {
            var scrollOptions = scope.$eval(iAttrs.scrollOption);//解析scroll特性配置对象
            var defaultOptions = $scroll.getOptions();//获取统一风格的配置对象
            var niceOptions = angular.extend(defaultOptions, scrollOptions);
            var niceScroll = $(iElement).niceScroll(niceOptions); //调用第三方插件nicescroll方法对dom元素实现滚动条效果
            scope.$on('$destroy', function () { // 注册'$destroy'事件来删除任何易于内存泄漏的代码。
                if (angular.isDefined(niceScroll)) {
                    niceScroll.remove()
                }
            })
        }
    }]);

 另外注意:nicescroll是管滚动条DOM节点均加在父容器上,当于同一页面中采用多独nicescroll滚动条时,滚动容器的滚动条时会影响内部的轮转漫漫位置,要立刻隐藏用完的nicescroll对象,

 加载时,需要先show,再resize。

 由于这缘故,使用多滚动条需要事先躲滚动条的显示,还是满足不了职责的要求,所以来矣第三种植方案。

其三栽方案:引入另一个扩大插件perfect-scrollbar并针对性该展开封装成AngularJs指令使其再方便使用。

 此插件有JS和Jquery双版本,我还爱好引入原生的js版,性能好也不用依赖jquery库,插件的行使介绍直接看官方文档 https://github.com/noraesae/perfect-scrollbar

 在做自己种控件使用时带了别一个难题,perfect-scrollbar能缓解多滚动条场景的BUG,但引入了其他一个BUG,比如表格Table中采用滚动条,在表数据还从未要成功时,元素的scrollHeight高度为0,导致

 perfect-scrollbar以初始化滚动条时,无法获取元素的有血有肉高度scrollHeight,从而滚动条之惊人为0,结果同样开始滚动条是勿形的,鼠标在报表上滚一下滚长长的就是出来了。

 

 那么问题来了,如何缓解Ajax请求的数Ajax还非加载时,内容之可观还未确定的气象怎么设置滚动条也?

 1,最原始的计就是管初始化滚动条之操作放在Ajax请求的回调函数中,但是每个与数量有关的地方要滚动条显示时也是得都要进行这个处理,使用未便利,而且Ajax请求一般还封装成单独的数据服务模块,滚动条逻辑与数据服务扯上涉了马上来硌尴尬,同时为平添了模块间的耦合性。

 2,可以应用事件监听,监听内容区域DOM元素的resize事件,当内容变更时就是可知自行增加元素的可观,就得当监听函数中拍卖滚动条之创新。

 当调整浏览器窗口的轻重时,发生 resize 事件。也就是说,resize
事件触发在window对象及,window.addEventListener(“resize”,fn);

 有个大神写了单点子好在div上监听resize事件,直接就是足以
$(‘div’).resize(fucntion(){ .. });
详情请看自己其他一样首文章的笔录:http://www.cnblogs.com/weboey/p/6014966.html

 3,最佳解决方式。HTML5的新特征MutationObserver,它的意向是监视DOM变动。当DOM对象树出其他移时,MutationObserver会得到关照。有关MutationObserver的详实介绍和以本文就未详细介绍
 了,(HTML5斯接口非常强大,值得大家去学习刺探)以下是我利用MutationObserver来缓解内容元素的更改更新滚动条高度的代码,并封装成angularjs指令,直接以性之花样利用。

define(['perfect-scrollbar','css!ng.Scroll'], function(perfectScroll) {
    angular.module('ng.Scroll', [])
        .directive('ngScroll', [function () {
            return {
                restrict: 'A',
                link: _link
            };
            function _link(scope, iElement)
            {
                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                var hlazyresize=null;
                var container = iElement[0];
                iElement.css({position: 'relative',overflow: 'hidden'}); //滚动条容器必要的样式
                perfectScroll.initialize(container);  //初始化滚动条

                perfectScroll.lazyResize=function(){  //DOM元素内容不确定是否加载完,滚动条进行延时加载处理
                    if (hlazyresize) clearTimeout(hlazyresize);
                    hlazyresize = setTimeout(function(){
                        perfectScroll.update(container);
                    },200);
                };

                perfectScroll.lazyResize();

                if(!!MutationObserver)
                {
                    //观察配置对象,观察所有子节点(包括子节点和子节点的子节点)
                    var observerOption={
                        'childList': true,
                        'subtree': true
                    };
                    //观察DOM树变动,更新滚动条
                    perfectScroll.observer=new MutationObserver(
                        function(mutations){
                            perfectScroll.lazyResize();
                        }
                    ).observe(container, observerOption);
                    //观察滚动条注销,取消观察
                    perfectScroll.observerRemover = new MutationObserver(
                        function(mutations) {
                            mutations.forEach(function(mo) {
                            if (mo.removedNodes.length > 0) {
                                for (var dom in mo.removedNodes) {
                                    if (!!perfectScroll && (mo.removedNodes[dom] == container))
                                    {
                                        perfectScroll.observer.disconnect();
                                        perfectScroll.destroy(container);
                                    }
                                }
                            }
                        });
                    }).observe(container.parentNode, observerOption);
                }
                scope.$on('$destroy', function () { // 注册'$destroy'事件来删除任何易于内存泄漏的代码。
                    if (angular.isDefined(container)) {
                        perfectScroll.destroy(container);
                        !!hlazyresize&&clearTimeout(hlazyresize);
                    }
                });
            }
        }]);
});

总结

做事吃都见面遇上有轻重问题,与大家大快朵颐一下职责的完成经过。鉴于自己之技能呢菜,如果起还好之不二法门还是编码不兢兢业业的地方迎大家正,请留下于评价里供大家学习,一起共勉,谢谢。

 

相关文章