H5移动端自定义滚动条

项目还是用angularJs + ionic1.0做的。为什么要自定义滚动条呢？
原因：IOS 自带的触摸事件导致页面上线滑动有空白。所以禁掉了默认的滑动事件：
if(ionic.Platfrom.isIOS()){
document.querySelector('body').addEventListener('touchmove',function(event){
event.preventDefault();
});

结果：导致IOS里面 的ul li 标签页无法滑动了。但是android 倒是可以滑动却没有滚动条，给ul 外出div 设置overflow：atuo;overflow-y：atuo;都没有用。

解决：用ion-scroll代替 ul ，这时候android ios 都可以滑动了，也都有滚动条了。但是，问题来了。在魅族手机上布局一开始show处理后，滑动ion-scroll 有叠层。如下图：

这兼容性问题 好坑。原因是app底座用了系统的浏览器，没有统一用开源内置浏览器，所以一直以来开发Hybird app兼容问题好蛋疼。

所以只能ios 和android分开实现了。ios用ion-scroll。android 自己给ul写个滚动条。以下代码是按客户要求需要内容多的时候一直显示滚动条的示例

（开始不了解js 有个onscroll 回调 用了 touch事件去做，做不到精准算到布局移动距离。后面debug看到有onscroll回调。布局本身就提供了offsetTop ，这个offsetTop就是滚动条和布局精准的对应。）

if ($scope.timeout) {
    $timeout.cancel($scope.timeout);
}
if (!ionic.Platform.isIOS()) {
    $scope.timeout = $timeout(function () {
        try {
            var select_ul = document.querySelector('#select_ul');
            var select_bar = document.querySelector('#select_bar');
            var select_ulH = select_ul.offsetHeight || 200;
            var selectItemH = select_ul.firstElementChild.offsetHeight || 40;
            var contentH = (select_ul.children.length) * selectItemH;
            var offsetY;
            if (select_ul && select_bar) {
                if (select_ulH < contentH) {
                    //offsetY = select_ul.offsetHeight - (contentH - select_ul.offsetHeight) * 0.75;
                    offsetY = contentH * 0.46;
                    select_bar.style.height = offsetY + 'px';
                    select_bar.style.opacity = 1;
                } else {
                    select_bar.style.height = 0;
                    select_bar.style.opacity = 0;
                }

                var fixOffsetY = select_ulH - offsetY;
                var ratio = select_ulH / contentH;

                select_ul.onscroll = function (e) {
                    console.log('select_ul.onscroll = function (e)');

                    var scrollOffset = e.target.scrollTop * ratio;
                    if (fixOffsetY < scrollOffset) {
                        scrollOffset = fixOffsetY - 2;
                    }
                    select_bar.style.transform = 'translate(' + 0 + 'px,' + scrollOffset + 'px)';
                };

                /* select_ul.addEventListener("touchstart", function (e) {
                 console.log('select_ul.addEventListener("touchstart", function (e)');
                 select_bar.style.height = offsetY + 'px';
                 select_bar.style.opacity = 1;
                 });*/
                /*select_ul.addEventListener('touchend', function (e) {
                 $timeout(function () {
                 select_bar.style.height = 0;
                 select_bar.style.opacity = 0;
                 }, 500);

                 console.log('select_ul.addEventListener("touchend", function (e)');
                 });*/
            }
        } catch (e) {
            console.log('angular.element(body) catch ' + e.toString());
        }
    }, 200);
} else {
    $scope.timeout = $timeout(function () {
        try {
            var select_scroll = document.querySelector("#select_scroll");
            var array_a = select_scroll.querySelectorAll("a");
            var select_scroll_H = select_scroll.offsetHeight || 200;
            var contentH = 0;
            angular.forEach(array_a, function (item, index, array) {
                contentH += item.offsetHeight || 40;
            });
            if (select_scroll.lastElementChild.lastElementChild) {
                if (select_scroll_H < contentH) {
                    select_scroll.lastElementChild.lastElementChild.style.opacity = 1;
                    select_scroll.lastElementChild.lastElementChild.style.height = contentH * 0.5 + 'px';
                } else {
                    select_scroll.lastElementChild.lastElementChild.style.opacity = 0;
                    select_scroll.lastElementChild.lastElementChild.style.height = 0;
                }
            }
        } catch (e) {

        }
    }, 200);
}