想要专注，但不想滚动 iPhone 网络应用

Posted 2023-03-14

【中文标题】想要专注，但不想滚动 iPhone 网络应用

【英文标题】：Want Focus, but don't want scrolling iPhone web-app

【发布时间】：2013-08-08 09:59:11

【问题描述】：

我正在构建一个 ios 网络应用程序。我想禁用滚动，所以我使用了：

$(document).bind('touchmove', function(e) 
    e.preventDefault();
);

而且效果很好。但是，现在如果用户点击一个输入，它就不会聚焦。 “没什么大不了的”，我想。这一半解决了问题：

$("div#searchBarView input").hammer().on("tap", function() //I'm using the hammer.js touch library.
    this.focus();
);

所以现在键盘出现了，但没有出现光标或蓝色焦点雾。如果我键入，则不会出现任何文本。任何想法如何获得焦点，但保持滚动关闭？

谢谢！

-肖恩

【问题讨论】：

必须尝试使用​​ $("body").css("overflow", "hidden"); ?

尝试给文档一个相对位置，z-index 值为 -1，并给输入一个相对位置，z-index 值为 1

我忘了说：body 和 html 都是 overflow:hidden 和 height:100%

【参考方案1】：

与其使用 javascript 来防止滚动，您可能想看看另一种方法，您应该能够使用纯 CSS 来防止滚动

html, body 
  overflow: hidden;
  height: 100%;
  padding: 0;
  margin: 0;

然后你可以禁用弹跳 - How to prevent app running in phone-gap from scrolling vertically?

【讨论】：

我看过这个问题，它指的是反弹，而不是滚动。我想阻止视图滚动。

所以我读到你已经溢出：隐藏在之前的评论中 - 你的视口设置是什么？