zoukankan      html  css  js  c++  java
  • web移动端浮层滚动阻止window窗体滚动JS/CSS处理

    CSS代码:
    .noscroll,
    .noscroll body {
        overflow: hidden;
    }
    .noscroll body {
        position: relative;
    }
    JS代码:
    $.smartScroll = function(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);
    };
  • 相关阅读:
    Android开发自学笔记(Android Studio)—4.1布局组件
    交换机远程管理
    ThinkPHP开发博客系统笔记之二
    PHP编码规范
    Kali Linux学习笔记
    CSS编码规范
    ThinkPHP开发博客系统笔记之一
    2 Powershell与Cmd以及Unix/Linux Shell
    不同vlan间通信的三种配置方式
    配置超级用户口令(Cisco IOS系统)
  • 原文地址:https://www.cnblogs.com/love314159/p/9184162.html
Copyright © 2011-2022 走看看