移动 Safari：专注于输入时防止滚动页面

【问题标题】：mobile Safari: prevent scroll page when focus on input移动 Safari：专注于输入时防止滚动页面
【发布时间】：2016-10-27 07:57:20
【问题描述】：

当用户点击输入时，我试图阻止滚动页面：

<pre class="js-parent">
  <input value="tap to focuss" readonly>
</pre>

$("input").on("focus", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

$("input").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.setSelectionRange(0, 9999);
});

几个问题：

1) 当用户点击输入页面时滚动到元素（到页面顶部）

2) 当焦点处于活动状态时，父块丢失position: fixed

demo

demo with code

【问题讨论】：

标签： javascript jquery ios css safari

【解决方案1】：

您可以通过以下技巧欺骗 safari 认为当前焦点输入位于页面顶部，因此无需向下滚动：

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){

            var intv = 100;
            var $obj = $(this);

            if (getMobileOperatingSystem() == 'ios') {

                e.stopPropagation();

                $obj.css({'transform': 'TranslateY(-10000px)'}).focus();
                setTimeout(function(){$obj.css({'transform': 'none'});}, intv);
            }
            return true;
        });

您可以在以下线程中找到更多详细信息，该线程也显示了如何为 android 操作系统执行此操作。

jquery mobile How to stop auto scroll to focused input in Mobile web browser

【讨论】：