草庐IT

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

coder 2024-05-10 原文

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

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

以下是我尝试过但没有成功的一些事情:

方法一:

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

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

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

方法二:

// 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;  
}

还有什么建议吗？

最佳答案

我通过添加 position: fixed; 解决了这个问题至 .no-scroll适用于 html和 body显示图形时。

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

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

添加到 JS 以启用关闭图形滚动:

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

CSS:

.no-scroll {
    position: fixed;
}

希望这能帮助其他遇到类似问题的人。

关于javascript - 防止在特定屏幕尺寸的智能手机上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36030936/

能手机上preventDefaultcodewindowjavascriptjquerycssmobilescroll

有关javascript - 防止在特定屏幕尺寸的智能手机上滚动的更多相关文章

  1. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  2. Ruby - 如何在读取文件时跳过/忽略特定行？ - 2

    在读取/解析文件(使用Ruby)时忽略某些行的最佳方法是什么？我正在尝试仅解析Cucumber.feature文件中的场景，并希望跳过不以Scenario/Given/When/Then/And/But开头的行。下面的代码有效，但它很荒谬，所以我正在寻找一个聪明的解决方案:)File.open(file).each_linedo|line|line.chomp!nextifline.empty?nextifline.include?"#"nextifline.include?"Feature"nextifline.include?"Inorder"nextifline.include?

  3. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  4. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - Ruby on Rails - 需要在每周的特定时间将消息发送到电子邮件 - 2

    我想知道我应该如何着手这个项目。我需要每周向人们发送一次电子邮件。但是，这必须在每周的特定时间自动生成并发送。编码有多难？我需要知道是否有任何书籍可以提供帮助，或者你们中的任何人是否可以指导我。它必须使用ruby​​onrails进行编程。因此有一个网络服务和数据库集成。干杯 最佳答案 为什么这么复杂？您只需安排工作。您可以使用Delayed::Job例如。Delayed::Job让您可以使用run_at符号在特定时间安排作业，如下所示:Delayed::Job.enqueue(SendEmailJob.new(...),:run_

  7. ruby - 防止SQL注入(inject)/好的Ruby方法 - 2

    Ruby中防止SQL注入(inject)的好方法是什么？ 最佳答案 直接使用ruby？使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject

  8. ruby-on-rails - 如果特定语言环境中缺少翻译，如何配置 i18n 以使用 en 语言环境？ - 2

    如果特定语言环境中缺少翻译，如何配置i18n以使用en语言环境翻译？当前已插入翻译缺失消息。我正在使用RoR3.1。 最佳答案 找到相似的question这里是答案:#application.rb#railswillfallbacktoconfig.i18n.default_localetranslationconfig.i18n.fallbacks=true#railswillfallbacktoen,nomatterwhatissetasconfig.i18n.default_localeconfig.i18n.fallback

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - 根据要求使用特定的 VCR 磁带 - 2

    情况:使用Rspec、FactoryGirl和VCR测试Rails应用程序。每次创建用户时，都会通过Stripe的API创建关联的Stripe客户。测试时，添加VCR.use_cassette或describe"...",vcr:{cassette_name:'stripe-customer'}do...到涉及用户创建的每个规范。我的实际解决方案如下:RSpec.configuredo|config|config.arounddo|example|VCR.use_cassette('stripe-customer')do|cassette|example.runendendend但这是

随机推荐