Страница всегда с автофокусом на textarea и scrolltotop не работает

Question

У меня есть страница с некоторыми элементами-флажками, а затем элемент textarea в самом низу страницы. Для этого textarea назначено без автофокуса .

<textarea id="comments" class="form-control" rows="8">@Comments</textarea>

textarea всегда получают фокус при загрузке страницы и прокручивают до самого дна.

Он должен работать для контейнеров веб-просмотра Android и iPhone.

Я много пытался прокрутить страницу вверх после загрузки страницы или убрать фокус с этого элемента, нопока не повезло.

Я попробовал ниже различные уловки, которые я нашел здесь:

    $("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 будет игнорироваться, если переполнение не было «скрытым» (что, безусловно, является ошибкой браузера).

Тем не менее, я не проверял это на элементе тела. Ошибка появляется на любом элементе DOM с переполнением, где я нашел обходной путь. Я не сталкивался с этой ошибкой много лет, так как старые браузеры Android довольно редки и не поддерживаются в моих текущих проектах.

Кроме того, попытка исправить проблему с помощью scrollTop кажется неправильной,Вы должны попытаться установить причину, по которой ваш элемент получает фокус и прокручивает окно при запуске. Я не могу помочь вам с этим, не увидев работающий веб-сайт с этой проблемой. Если бы вы могли создать jsfiddle или его эквивалент, который воспроизводит проблему, я с радостью на нее посмотрю.

Answer 2

На самом деле я смог взломать его. В основном я сделал текстовую область доступной только для чтения при загрузке страницы. так что это не получит фокус. А затем установите его, чтобы снова включить после истечения времени ожидания. Таким образом, текстовое поле будет включено, когда пользователь начнет прокручивать вниз.

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