移动端弹出层之后禁用底部滚动条关闭回到原位置

$("cli-open").click(function(){
var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置
window.onscroll=function(){
document.body.scrollTop = scrollTop;//赋值给滚动条的位置
}
})

$(".cli-close").click(function(){
window.onscroll=function(){
document.body.scrollTop=document.body.scrollTop;//关闭后清除保存位置的值
}
})

时间: 2024-08-03 06:48:24

移动端弹出层之后禁用底部滚动条关闭回到原位置的相关文章

移动端弹出层滚动穿透问题总结

移动端弹出层(简称layer)时,层内有大量文字需要滚动,但是背景层(简称body)会随着layer的滚动而滚动,用户体验较差.参考了网上的一些资料,总结解决方案如下: .scrollFix{ height: 100%; overflow: hidden; position: relative;}.scrollFix body{ height: 100%; overflow: hidden;} 弹出层前: //防止body层向下滚动后出现内容显示不全的问题$('html,body').anima

实现移动端弹出层弹出的时候页面不能滑动,关闭弹出层时页面恢复滑动

思路是:显示弹层时,禁用触摸事件 在你显示弹出框的时候:添加: function ShowDiv() { window.ontouchmove = function(e) { e.preventDefault && e.preventDefault(); e.returnValue = false; e.stopPropagation && e.stopPropagation(); return false; } } 在关闭弹层时,添加: function CloseDiv

移动端弹出层加遮罩后禁止滑动

//实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){ document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 } /***取消滑动限制***/ function move(){ document.body.style.overflow='';

移动端弹出层滚动卡顿解决方案

IOS: -webkit-overflow-scrolling: touch; overflow-scrolling: touch; 安卓: -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 安卓的表现仍然不够流畅.但是至少没之前那么卡顿了... 原文地址:https://www.cnblogs.com/dodocie/p/8685901.html

关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题.下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题.下面主要分享一下解决办法以及关键代码. 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 .... 后来经过网友的帮助,结合我的代码终于找到了解决的办法 我的项目是用vu

移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理

如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport&quo

移动端js弹出层滚动的时候 body层不可滚动的解决办法

原文:https://blog.csdn.net/queenzjl/article/details/53507661 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 三.加上touchmove事件:window.ontouchmove = function(e){e.preventDefault()

一个基于jQuery的弹出层插件XYTips

效果预览:http://www.juheweb.com/js/tc/80.html 标签: jQuery [1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

javascript实现掉落弹出层------Day29

顾名思义,所谓"掉落弹出层",就是出现一个弹出层,而出现的位置是从上方向下掉落,掉落到指定的位置停止,这样分析起来,和"右下角弹出提醒对话框"比起来,确有异曲同工之妙啊,一个从上向下,一个由下及上. 实现原理: 我们不妨肢解了这个动作来看,可以大概分为这几个部分: 1.弹出弹出层,弹出层位置在屏幕上方不可见: 2.弹出层从上而下的降落: 3.弹出层到达指定位置,停止降落: 如果加上缓冲弹跳效果的话,就是四部分: 4.出现缓冲弹跳效果,直到静止,而弹跳效果简单了说,就