JQuery scrollTop() не работает при прокрутке DIV на мобильных браузерах, альтернативы?

Ответ 1

Это сработало для меня:

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );

Ответ 2

Работа, которая работала для меня: во-первых, временно установите свойство переполнения на "скрытое", затем установите свойство scrollTop, затем установите свойство переполнения обратно в "прокрутку" (или автоматически). Значение scrollTop, похоже, сохраняется неповрежденным и выполняется, когда свойство переполнения возвращается к "прокрутке". Это было довольно тривиальное обходное решение, которое работало во всех браузерах, на которых я тестировал (на рабочем столе и на мобильных устройствах). Я не тестировал его исчерпывающе, и я не тестировал переходы на месте, поэтому могут возникнуть побочные эффекты, с которыми я не сталкивался... Ваш пробег может отличаться - но это легко попробовать.

Ответ 3

Я нашел ответ здесь http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

Мобильные телефоны не понимают $('html,body'), поэтому вы можете сделать следующее для мобильных устройств

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

ИЛИ

просто используйте $('body') вместо $('html, body').

Ответ 4

Вы пробовали это?

$("html").scrollTop(0);

Ответ 5

Временно устанавливая свойство overflow на "скрытый", как рекомендовано в ответе @Allan Nienhuis, не работает, например, на Android 4.0.3 (например, на том, что работает Kindle Fire 2s) - когда вы установите overflow обратно на scroll, элемент прокручивается назад.

Альтернатива:

• Сбросьте свою собственную прокрутку с помощью вспомогательной функции, как показано здесь - пока это просто реализовать, это голые кости в том, что он не дает вам инерциальной прокрутки или прокрутки.

• Используйте библиотеку, такую ​​как iScroll, которая реализует собственную сложную прокрутку (инерциальную, перекрестную) на основе преобразований CSS,

Использование iScroll требует немного настройки: вам нужна обертка div с фиксированной высотой и стилем overflow: hidden, а элемент для прокрутки должен иметь стиль overflow. Эта демонстрация jsFiddle показывает, как это делается.

Ответ 6

Единственный способ добиться прокрутки вверху страницы на вкладке Galaxy скрывал страницу body за 100 мс при прокрутке. Использование jQuery:

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

Ответ 7

У меня есть несколько решений для вас. Вам придется протестировать их самостоятельно, поскольку я не пробовал их в мобильном браузере раньше, но вот они:

• Используйте метод jQuery .css() (или .animate() в зависимости от вашей конечной цели нас), чтобы скорректировать верхний край (обратите внимание: вам нужно будет изменить переполнение на скрытое и обернуть текст во внутреннем div, что быть элементом, для которого вы настраиваете марку)
• Сделайте то же самое, что и в первом решении, за исключением того, что встроенная позиция div относительная и отрегулируйте атрибут top.

Сообщите мне, если вам нужна помощь, если у вас есть какие-либо вопросы. Удачи!:)

Обратите внимание: хотя я не тестировал их на мобильных устройствах, прежде чем они основывались на стандартах CSS, а не на функциях jQuery, поэтому они должны работать.

Ответ 8

Попробуйте использовать метод jQuery.animate:

$('.div').animate({ scrollTo: x; });

Где x равно положению div, который вы хотите прокрутить до вершины.

Ответ 9

jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>

Ответ 10

Используйте следующий код:

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );

Ответ 11

Вместо того чтобы использовать методы scroll, scrollTo или scrollTop (которые доставляют мне проблемы с мобильными устройствами), я рекомендую установить идентификатор для вашего верхнего элемента DOM (например, #top) и просто использовать:

document.getElementById("top").scrollIntoView();

это работает лучше всего для меня на всех устройствах и браузерах.

Ответ 12

Эти решения не работают для меня. Я знаю, что кто-то упоминал мобильное обнаружение, но их подход не работал для меня. Наконец-то меня осенило использовать мобильное обнаружение для предоставления двух разных стилей CSS для каждого случая. Может быть, не идеально, но это точно работает. Временное изменение стилей с помощью js, также предложенное выше, у меня не сработало.

У меня был двухколонный макет с независимой прокруткой div, каждый из которых был настроен на переполнение: прокрутка, а тело должно было быть настроено на переполнение: скрыто. Мне нужно использовать scrollTop на одном из столбцов, и никакие решения не сработали.

Я использовал wp_is_mobile() (функция Wordpress), и если mobile true, overflow: hidden удаляется из тела, а div с overflow: scroll удаляют этот css. Наконец, scrollTop работал на мобильном телефоне.

Ответ 13

У меня была такая же проблема, и я решил ее использовать с помощью jquery .offset().

http://api.jquery.com/offset/

$('#yourFineElement').offset({ top: X, left Y)});