prevent滚动的手机浏览器，没有preventing投入重点 [英] Prevent scrolling on mobile browser, without preventing input focusing

问题描述

我用的touchstart preventDefault（）上的文件prevent滚动页面上。不幸的是这prevents太多。用户可以不再给焦点输入（并打开软键盘）。使用jQuery焦点（），我可以给焦点到输入上touchstart。这将打开软键盘上的iOS（大部分时间），但从来没有在Android上。

I use preventDefault() on touchstart on the document to prevent scrolling on a page. Unfortunately this prevents too much. The user can no longer give focus to an input (and open the soft keyboard). Using jQuery focus(), I can give the focus to the input on a touchstart. This opens the soft keyboard on iOS (most of the time), but never on Android.

背景

我有我要让尽可能多的像一个移动应用程序尽可能的网页。我只是真的关心Android和iOS，但任何形式的因素。我首先制备完全相同的大小随着屏幕尺寸的页的内容。这是很好的，直到用户将他们的手指在页面上。我需要prevent用户滚动。下面code完成这一点，但在这两个操作系统上略有不同。

I have a webpage that I want to make as much like a mobile app as possible. I'm only really concerned with Android and iOS, but any form factor. I start by making the content in the page exactly the same size as the screen size. This is nice until the user puts their finger on the page. I need to prevent user scrolling. The following code accomplishes this, but in slightly different ways on the two operating systems.

$(document).on('touchstart', function(e) {
    e.preventDefault();
});

在iOS上，这个prevents弹性滚动：在这里用户可以通过尝试滚出页面显示网页后面的质感。该功能是很好的一个普通的网页，但在我的情况下，它从UX有损。

On iOS, this prevents the elastic scrolling: where a user can reveal a texture behind the webpage by attempting to scroll off the page. The feature is nice for a regular webpage, but in my case it detracts from the UX.

在Android上，prevents，我用它来隐藏地址栏一个方便黑客的启示。机器人的浏览器开始与地址栏可见，但随着用户向下滚动的页面，它消失。要以编程方式强制浏览器隐藏地址栏，只需添加这行code到你的函数调用的负载。

On Android, prevents the revelation of a handy hack that I use to hide the address bar. Android browsers start with the address bar visible, but as the user scrolls down the page, it disappears. To programmatically force the browser hide the address bar, simply add this line of code to your function called at load.

$('html, body').scrollTop(1);

这是一个哈克（也是唯一）的方式告诉大家，我们已经滚动Android浏览器，地址栏不再是必要的。

This is a hacky (but also the only) way to tell the android browser that we have scrolled, and the address bar is no longer necessary.

如果没有对文件的preventDefault，Android浏览器将允许滚动和地址栏可以被揭示。

Without the preventDefault on the document, the Android browser will allow scrolling and the address bar can be revealed.

所以，这两个操作系统的有一个很好的理由，这个preventDefault（）呼吁对文档每touchstart，但prevents太多。攻丝在输入栏上什么都不做。通过调用jQuery的焦点（）可以帮助，但只有打开软键盘上的iOS，Android的不

So, both OS's have a good reason to have this preventDefault() called on every touchstart on the document, but it prevents too much. Tapping on an input field does nothing. Using a call to jQuery focus() can help, but only opens the soft keyboard on iOS, not Android.

$('input').on('touchstart', function() {
    $(this).focus();
});

如何prevent页面的滚动，但使用的浏览器本机功能的输入域给人的焦点？

请注意： 这code

Note: This code

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

是有缺陷的，因为用户仍可以只要初始触摸从输入字段内发起滚动页面。

is flawed because the user can still scroll the page as long as the initial touch originates from within the input field.

推荐答案

我其实解决的另一个项目这个问题，忘记了它，并通过打字了记忆中最方式。

I actually solved this problem on another project, forgot about it, and remembered it most of the way through typing this up.

他们关键是要做到这一点就touchmove。

They key is to just do it on touchmove.

$(document).on('touchmove', function(e) {
    e.preventDefault();
});

不过，touchstart preventDefault做各种各样的像$ P $好话pventing保存图像菜单上的姿势使幻灯片。我的项目还包括这一点。

However, preventDefault on touchstart does all kinds of nice things like preventing the image save menu on a gesture enabled slideshow. My projects also include this.

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

如果任何人有额外的内容或如何重新格式化这一点，以便它可以达到更大的观众，将是巨大的一些建议。我还没有见过我这里有所有的在一个地方的内容，所以我觉得它需要被如此。

If anyone has some suggestions on additional content or how to reformat this so that it can reach a greater audience that would be great. I haven't ever seen the content I have here all in one place, so I felt that it needed to be on SO.

这篇关于prevent滚动的手机浏览器，没有preventing投入重点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！