码迷,mamicode.com
首页 > 其他好文 > 详细

工作总结

时间:2017-01-06 12:27:25      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:flow   解决   工作   上下   art   function   src   浏览器   距离   

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) 获取当前事件的元素

工作总结

标签:flow   解决   工作   上下   art   function   src   浏览器   距离   

原文地址:http://www.cnblogs.com/gaidalou/p/6255712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!