工作总结

1、手机端做了个 一屏屏滚动 的页面。但是设计给的图太长 下面挡住了看不到下面。就自己写了一个模仿swiper的，在其他浏览器没事，但是在QQ浏览器 下拉时 QQ浏览器自带的下拉框出现（已启用QQ浏览器X5内核），没法下拉去上一页。

解决：在html标签上添加 class=“noscroll”

css：

.noscroll,
.noscroll body {
overflow: hidden;
}
.noscroll body {
position: relative;
}

js:

$(function(){
        function smartScroll(container, selectorScrollable){
            // 如果没有滚动容器选择器，或者已经绑定了滚动时间，忽略
            if (!selectorScrollable || container.data('isBindScroll')) {
                return;
            }
        
            // 是否是搓浏览器
            // 自己在这里添加判断和筛选
            var isSBBrowser;
        
            var data = {
                posY: 0,
                maxscroll: 0
            };
        
            // 事件处理
            container.on({
                touchstart: function (event) {
                    var events = event.touches[0] || event;
                    
                    // 先求得是不是滚动元素或者滚动元素的子元素
                    var elTarget = $(event.target);
                    
                    if (!elTarget.length) {
                        return;    
                    }
                    
                    var elScroll;
                    
                    // 获取标记的滚动元素，自身或子元素皆可
                    if (elTarget.is(selectorScrollable)) {
                        elScroll = elTarget;
                    } else if ((elScroll = elTarget.parents(selectorScrollable)).length == 0) {
                        elScroll = null;
                    }
                    
                    if (!elScroll) {
                        return;
                    }
                    
                    // 当前滚动元素标记
                    data.elScroll = elScroll;
                    
                    // 垂直位置标记
                    data.posY = events.pageY;
                    data.scrollY = elScroll.scrollTop();
                    // 是否可以滚动
                    data.maxscroll = elScroll[0].scrollHeight - elScroll[0].clientHeight;
                },
                touchmove: function () {
                    // 如果不足于滚动，则禁止触发整个窗体元素的滚动
                    if (data.maxscroll <= 0 || isSBBrowser) {
                        // 禁止滚动
                        event.preventDefault();
                    }
                    // 滚动元素
                    var elScroll = data.elScroll;
                    // 当前的滚动高度
                    var scrollTop = elScroll.scrollTop();
            
                    // 现在移动的垂直位置，用来判断是往上移动还是往下
                    var events = event.touches[0] || event;
                    // 移动距离
                    var distanceY = events.pageY - data.posY;
            
                    if (isSBBrowser) {
                        elScroll.scrollTop(data.scrollY - distanceY);
                        elScroll.trigger('scroll');
                        return;
                    }
            
                    // 上下边缘检测
                    if (distanceY > 0 && scrollTop == 0) {
                        // 往上滑，并且到头
                        // 禁止滚动的默认行为
                        event.preventDefault();
                        return;
                    }
            
                    // 下边缘检测
                    if (distanceY < 0 && (scrollTop + 1 >= data.maxscroll)) {
                        // 往下滑，并且到头
                        // 禁止滚动的默认行为
                        event.preventDefault();
                        return;
                    }
                },
                touchend: function () {
                    data.maxscroll = 0;
                }    
            });
            // 防止多次重复绑定
            container.data('isBindScroll', true);
        };
//        父，滑动的外层
        var nianduzhangdan=$('#nianduzhangdan');
        smartScroll(nianduzhangdan, '.inner');  
    })

 

这样就禁止了QQ自带的下拉框 

 

2、JQ的2方法 .is（）返回true、false 判断事件的对象是不是括号里的对象；parents() 判断事件的对象是不是括号里的对象的子;

3、$(event.target) 获取当前事件的元素