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);
};

web移动端浮层滚动阻止window窗体滚动JS/CSS处理的更多相关文章

  1. 移动端弹窗滚动时window窗体也一起滚动的解决办法

    在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止w ...

  2. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  3. web移动端常见问题解决方案 (转)

    总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...

  4. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  5. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  6. Delphi XE5通过WebService开发Web服务端和手机客户端

    Delphi XE5通过WebService开发Web服务端和手机客户端介绍 我们开发一个三层的android程序 建立一个webservices  stand-alone vcl applicati ...

  7. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  8. web移动端下拉加载数据简单实现

    //下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...

  9. 10个你不得不知的WEB移动端开发的兼容问题

    1.IOS下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决 2.一些情况下对非可点击元素如(label,span)监听 ...

随机推荐

  1. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

  2. destoon使用

    使用小计 1.判断是否是手机端 {$DT_TOUCH}模板中使用 2.判断句 {if}  {/if} 3.表单管理 扩展功能-----表单管理:添加表单---->管理表单选项------> ...

  3. Android 目前最稳定和高效的UI适配方案

    Android系统发布十多年以来,关于Android的UI的适配一直是开发环节中最重要的问题,但是我看到还是有很多小伙伴对Android适配方案不了解.刚好,近期准备对糗事百科Android客户端设计 ...

  4. extjs中store的reload事件异步问题解决

    转载自:http://blog.sina.com.cn/s/blog_8f8b7fc10100zd75.html store0.reload({params:{start:0, limit:10}}) ...

  5. yum安装软件内容

    linux  yum源改为阿里yum源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  6. CF1065D

    如果不喜欢过长代码的看官,请移步其他题解... 这题其实思想极其简单: 棋盘问题常见的算法都比较暴力,常用的有搜索和状压dp 而这道题显然没啥能状压的,所以我们考虑搜索 但是仅仅搜索是不够的,因为有极 ...

  7. ubuntu 手动更新源 以及使用sudo update与upgrade的作用及区别

    一.今天更新一下我的ubuntu系统,用了几个源发现不怎么好用 上网查了一下发现有说阿里云的源挺好用 然后我试了一下 下载速度还挺快,下面分享一下怎么手动添加源列表 1.最好先做一下备份 sudo c ...

  8. 泛微云桥e-Bridge安装手册

    有时候不看官方文档进行配置,可能会出现奇奇怪怪的问题,SO转载一下官方文档,顺带学习. 想超长体验此软件,请搜索本博客内容,有破解方法,仅用来学习使用,顺带进行二次开发,请勿使用在商业用途,谢谢. 泛 ...

  9. 从零开始学C#——不再更新,直接进入高阶教程

    从零开始学习C#不再更新,直接进入高阶教程. 入门教程,请自行谷歌.百度吧,有很多这样的教程. 编程是一件实践性很强的事情,那么接下来的文章将开始进行开发项目. 还在编程中迷茫的人们,先暂时放下一切的 ...

  10. 配置frp

    一.下载 下载地址:https://github.com/fatedier/frp/releases 下载linux_amd64的,如果是32位系统就下载linux_386 二.安装 有公网IP的服务 ...