页面总是自动聚焦在 textarea 上，然后 scrolltotop 不起作用

Question

我有一个页面，其中包含一些复选框项目，然后是textarea页面底部的一个元素。这textarea有没有自动对焦功能分配。<textarea id="comments" class="form-control" rows="8">@Comments</textarea>textarea 页面加载并滚动到底部时始终获得焦点。它必须适用于 Android 和 iPhone webview 容器。我已经尝试了很多在页面加载后滚动到顶部或从此元素中删除焦点但到目前为止没有运气。我尝试了以下不同的技巧：    $("html,body").animate({ scrollTop: 0 }, "slow");    $(this).scrollTop(0);    $('textarea').blur();    $('#comments').blur();    document.activeElement.blur();    document.getElementById("origin").focus();    $('html,body').animate({                scrollTop: $("#origin").offset().top                 });    $("body").scrollTop(0);    document.body.scrollTop = 0;    document.documentElement.scrollTop = 0;偶数按钮转到顶部单击不起作用    $("#myBtn").on("click", function () {        console.log('ddd');        $(this).scrollTop(0);        $("html").scrollTop(0);            document.body.scrollTop = 0;            document.documentElement.scrollTop = 0;    });我还发现这可能是因为溢出：在主容器上滚动可能会阻止scrolltotop工作。所以这是我来自 _Layout.chtml 页面的主要容器详细信息。#mobile-content-wrapper {    position: relative;    width: 100%;    padding-bottom: 80px;    overflow-y: scroll;    overflow-x: hidden;我可以在这里使用你的一些经验。

Answer 1

android scrollTop 解决方法是：

document.body.style.overflow = 'hidden';

document.body.scrollTop = 0; 

document.body.style.overflow = 'scroll'; // or overflow-y and/or 'auto'

在一些旧版本的 android 浏览器上，如果溢出不是“隐藏的”（这绝对是浏览器错误），设置 scrollTop 将被忽略。

也就是说，我没有在 body 元素上测试。该错误出现在任何溢出的 DOM 元素上，这是我发现解决方法的地方。不过，我已经很多年没有遇到这个错误了，因为旧的 android 浏览器非常罕见，并且在我当前的项目中不受支持。

此外，尝试通过使用 scrollTop 来解决您的问题似乎是错误的。您应该首先尝试解决您的元素接收焦点并在启动时滚动窗口的原因。如果没有看到有问题的正在运行的网站，我无法帮助您。如果您可以创建一个 jsfiddle 或等效项来重现该问题，我很乐意查看它。

Answer 2

实际上我能够破解它。基本上我在页面加载时将 textarea 设为只读。所以它不会得到焦点。然后将其设置为超时后再次启用。这样文本框将在用户开始向下滚动时启用。

setTimeout(function () { document.getElementById('comments').readOnly = false }, 500);