zoukankan      html  css  js  c++  java
  • 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),但是谁让需求比较二逼呢对吧~
     
    如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????
    上述是有问题的哦~~~~~~  卖个关子,接下来会写  手持设备兼容的解决方案。 
  • 相关阅读:
    如何用一句话激怒设计师
    Kubernetes1.3:POD生命周期管理
    从零学React Native之11 TextInput
    从零学React Native之10Text
    html+js 在页面同步服务器时间
    电信行业的容器化改造之道
    容器化ICT融合初体验
    Laravel 发送邮件(最简单的讲解!)
    jquery( 点击按钮出来文本框并限制文本框的个数)
    OpenStack宣布用Kubernetes重写底层编排引擎
  • 原文地址:https://www.cnblogs.com/lxg0/p/5779451.html
Copyright © 2011-2022 走看看