防止在智能手机上滚动特定屏幕尺寸

艾哈迈德·萨尼(Ahmad Sanie)

我只需要防止在发生特定事件时使用JS和/或JQuery在移动设备上滚动即可。我有一个图形,当用户打开图形时,滚动将被禁用,一旦关闭,滚动将再次被启用。目标设备是:

  • 从4s到最新iPhone的任何iPhone(包括5 + 6)

这是我尝试过但未解决的一些事情:

方法1:

                    document.addEventListener('touchstart', this.touchstart);
                    document.addEventListener('touchmove', this.touchmove);

                    function touchstart(e) {
                        e.preventDefault()
                    }

                    function touchmove(e) {
                        e.preventDefault()
                    }

方法2:

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

还有其他建议吗?

艾哈迈德·萨尼(Ahmad Sanie)

我通过添加固定这position: fixed;.no-scroll被施加到html并且body当所述数字是diplayed。

已添加到JS以禁用在打开的图形上滚动:

$('html, body').toggleClass('no-scroll');

添加到JS以启用在闭合图形上滚动:

$('html, body').removeClass('no-scroll');

CSS:

.no-scroll {
    position: fixed;
}

希望这可以帮助其他有类似问题的人。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ExtJS 4 智能手机尺寸

来自分类Dev

Bootstrap布局在智能手机上过宽

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

为什么程序在特定的智能手机上抛出OutOfMemoryError?

来自分类Dev

将屏幕尺寸更改为智能手机屏幕尺寸时,无法将背景图像居中

来自分类Dev

大屏幕智能手机的RWD失败

来自分类Dev

Android初始屏幕尺寸,与智能手机和平板电脑的兼容性,疑问

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

android智能手机上的固定宽度html布局

来自分类Dev

Github仅在智能手机上页面CSS麻烦

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

如何在智能手机上相邻显示两个div?

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

使用Three.js对球体进行纹理处理无法在智能手机上使用

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

我在智能手机上没有任何CSS

来自分类Dev

智能手机上的位置服务-它使用哪个物理网络?

来自分类Dev

在智能手机上安装两个操作系统

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

智能手机上的媒体查询网站视图

来自分类Dev

android应用未出现在智能手机上

来自分类Dev

使用相机在Android智能手机上进行心率监测

来自分类Dev

避免在智能手机上自动下载pdf

来自分类Dev

引导A标签在平板电脑和智能手机上不起作用

来自分类Dev

App Android无法在智能手机上打开网页

来自分类Dev

自适应CSS在智能手机上不起作用

来自分类Dev

获取1200像素页面以在智能手机上正确显示

来自分类Dev

如何在物理Android智能手机上跟踪运行说明/分支机构?

Related 相关文章

  1. 1

    ExtJS 4 智能手机尺寸

  2. 2

    Bootstrap布局在智能手机上过宽

  3. 3

    OOP设计与智能手机上的性能

  4. 4

    在智能手机上运行VBA

  5. 5

    为什么程序在特定的智能手机上抛出OutOfMemoryError?

  6. 6

    将屏幕尺寸更改为智能手机屏幕尺寸时,无法将背景图像居中

  7. 7

    大屏幕智能手机的RWD失败

  8. 8

    Android初始屏幕尺寸,与智能手机和平板电脑的兼容性,疑问

  9. 9

    如何仅在智能手机上编码Bootstrap手风琴

  10. 10

    android智能手机上的固定宽度html布局

  11. 11

    Github仅在智能手机上页面CSS麻烦

  12. 12

    除非已缓存,否则SVG图片不会在智能手机上加载

  13. 13

    如何在智能手机上相邻显示两个div?

  14. 14

    React网站按钮和输入在智能手机上不起作用

  15. 15

    使用Three.js对球体进行纹理处理无法在智能手机上使用

  16. 16

    HTML和CSS布局在智能手机上无法正确显示

  17. 17

    我在智能手机上没有任何CSS

  18. 18

    智能手机上的位置服务-它使用哪个物理网络?

  19. 19

    在智能手机上安装两个操作系统

  20. 20

    返回浏览器时,PHP会话在智能手机上丢失

  21. 21

    智能手机上的媒体查询网站视图

  22. 22

    android应用未出现在智能手机上

  23. 23

    使用相机在Android智能手机上进行心率监测

  24. 24

    避免在智能手机上自动下载pdf

  25. 25

    引导A标签在平板电脑和智能手机上不起作用

  26. 26

    App Android无法在智能手机上打开网页

  27. 27

    自适应CSS在智能手机上不起作用

  28. 28

    获取1200像素页面以在智能手机上正确显示

  29. 29

    如何在物理Android智能手机上跟踪运行说明/分支机构?

热门标签

归档