H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否

禁止页面滚动 有三种方法

1,依靠css 将页面

document.documentElement.style.overflow=‘hidden‘;

document.body.style.overflow=‘hidden‘;//手机版设置这个。

如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。

但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动。 别着急 往下看

2,在 1 的基础上 添加 js功能

var move=function(e){

e.preventDefault && e.preventDefault();

e.returnValue=false;

e.stopPropagation && e.stopPropagation();

return false;

}

var keyFunc=function(e){

if(37<=e.keyCode && e.keyCode<=40){

return move(e);

}

}

document.body.onkeydown=keyFunc;

好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。

不过....对于高级用户来说,仍然有问题,比如 继续往下看

3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续

var st

var scroll=function(e){

clearTimeout(st);

st=setTimeout(function(){

window.scrollTo(loc.scrollLeft,loc.scrollTop);

},5);

}

window.onscroll=scroll;

上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~

如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????

上述是有问题的哦~~~~~~  卖个关子,接下来会写  手持设备兼容的解决方案。

时间: 2024-11-07 05:15:34

H5禁止页面滑动/滚动的相关文章

【移动端】js禁止页面滑动与允许滑动

禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed) $

js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1; function scrollFunc(e) { // e存在就用e不存在就用windon.event e = e || window.event;// 先判断是什么浏览器 if (e.wheelDelta) { // 浏览器IE,谷歌 if (e.wheelDelta > 0) {//当滑轮向上滚动时// console.log("滑轮向上滚动"); if (s == 0) {

微信H5单页面滑动的时候如何避免出界,出现头部和底部的黑底?

ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 ios偶现下拉出现黑底时,界面第一次上拉时拉不动的解决方案: document.querySelector('#app').addEventListener('touchstart', function (ev) { let a=$('#app')[0].scrollTop if($('#app')[0].scrollTop <=0){ $('#app')[0].scrollTop =1 } }); 问题分析

h5 slider页面滑动相关问题

1.touchend事件不能触发? a.在touchstart中添加event.preventDefault(),该方法会阻止元素的默认事件,如<a>标签的超链接无法响应,但是click事件可以通过tap事件代替. b.在touchmove中添加event.preventDefault(),该方法在touchstart的时候不会阻止默认事件,所以可以使用click和a标签的超链接 2.在iphone手机中无法触发iframe的播放按钮? 原因:translate3d会导致页面的焦点错误 方法:

小程序里禁止页面滑动

<view class="modal_bg" catchtouchmove="true" fixed="true" wx:if="{{ modal_show }}"></view> 原文地址:https://www.cnblogs.com/Basu/p/8434665.html

vue页面有弹层,禁止页面滚动

1 var preD = function (e) { 2 e.preventDefault() 3 } 4 export default { 5 data () { 6 return { 7 popupStatus: false 8 } 9 }, 10 watch: { // 监听data中弹层状态 11 popupStatus (val) { 12 if (val) { 13 document.body.style.overflow = 'hidden' 14 document.addEve

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,