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);
};
web移动端浮层滚动阻止window窗体滚动JS/CSS处理的更多相关文章
- 移动端弹窗滚动时window窗体也一起滚动的解决办法
在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止w ...
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- web移动端常见问题解决方案 (转)
总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
- Delphi XE5通过WebService开发Web服务端和手机客户端
Delphi XE5通过WebService开发Web服务端和手机客户端介绍 我们开发一个三层的android程序 建立一个webservices stand-alone vcl applicati ...
- 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...
- 10个你不得不知的WEB移动端开发的兼容问题
1.IOS下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决 2.一些情况下对非可点击元素如(label,span)监听 ...
随机推荐
- const成员函数和mutable关键字
一.const成员函数 class MyClass { public: void fun() const { } private: int m_nValue; } const成员函数内不能修改成员变量 ...
- python学习第42、43天 HTML\CSS
前端是什么? 帮助不了解后端程序的客户轻松使用程序的工具,可以提升工作效率,提供各种各样的体验. 通用的前端大致会使用三种语言,用在三个不同的方面对前端进行架构和优化,这里也只介绍这三种 web前端常 ...
- Day7--------------IP地址与子网划分
1.ip地址:32位 172.16.45.10/16 网络位:前十六位是网络位 主机位:后16位是主机位 网络地址:172.16.0.0 主机地址:172.16.45.10 A类: 0NNNNN ...
- 44)django-环境变量设置
如果外面程序需要调用django,就需要设置django环境指明调用那个项目. # _*_ coding:utf-8 _*_ __author__ = "shisanjun" im ...
- Windows 批处理大全(附各种实例)
Windows 批处理大全(附各种实例) 2009年07月19日 21:31:00 阅读数:2552 批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命 ...
- 1,环境的搭建,angular
也是学习一些皮毛,只是把这些经验记录下来而已. 至于angular有什么好处,或者有什么是什么,我就不多做介绍,自己可以去百度,肯定能找到更为详细的. 我使用的是google提供的angualr-cl ...
- 基于DBUtils实现数据库连接池
小知识: 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Anim ...
- mabatis的批量新增sql 初级的 初级的 初级的
简单描述:做开发的时候,会遇到一次插入好多条记录,怎么做好呢? 解决思路:循环insert啊! 哪凉快那呆着去←!← 这样会增加数据库开销的,当然不能这么干了,要在sql上下功夫.看代码,一下就明 ...
- 雅礼 noip2018 模拟赛day3 T2
典型的状压思想 设0表示黑球,1表示白球,用一串01序列代表剩下的球的状态,记f[i]表示在i状态下取球的最大期望 那么可以利用记忆化搜索更新,每一层枚举可能拿走的球然后向下搜索,同时记忆化即可 在状 ...
- 20165206 2017-2018-2 《Java程序设计》第五周学习总结
20165206 2017-2018-2 <Java程序设计>第五周学习总结 教材学习内容总结 内部类:支持在一个类中定义另一个类的类. 外嵌类:包含内部类的类,称为内部类的外嵌类. 匿名 ...