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

Question

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

Я пытаюсь прокрутить в определенное место прокрутки DIV. Прямо сейчас я использую смещение в пикселях с помощью функции jQuery scrollTop(), которая отлично работает в браузерах настольных компьютеров, но не работает в браузерах на мобильных устройствах Android, за исключением браузера Google Chrome Android (у меня нет устройства iOS для проверки работоспособности).). Все решения, которые я нашел, предназначены для прокрутки страниц (окон), а не для прокрутки в DIV. У кого-нибудь есть предложения относительно того, что еще я могу использовать для выполнения той же задачи?

Вот пример:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

Другие вещи, которые я пробовал, работают в настольных браузерах:

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

РЕДАКТИРОВАТЬ 3/11/13:

Это известная проблема браузера Android: https://code.google.com/p/android/issues/detail?id=19625

Один пользователь в отчете об ошибке предложил обходной путь:

поскольку проблема возникает только тогда, когда свойство переполнения установлено на прокрутку, вы можете сначала установить его в "скрытый", установить свойство scrollTop, а затем вернуть его обратно в "прокрутку" (или автоматически). Свойство scrollTop, по-видимому, учитывается при повторной визуализации элемента с помощью полос прокрутки. Не ясно, есть ли у этого неожиданные побочные эффекты, но "это работает на моей машине!"

35

javascript html jquery scroll mobile-browser

Источник

user1626521 01 сен '12 в 06:28

14 ответов

Другие вопросы по тегам javascript html jquery scroll mobile-browser

user2152289 27 авг '14 в 10:14 2014-08-27 10:14 · Answer 1 · 2014-08-27 10:14

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

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

10

Источник

user2152289 27 авг '14 в 10:14

user521042 20 янв '13 в 07:04 2013-01-20 07:04 · Answer 2 · 2013-01-20 07:04

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

user4119808 10 май '16 в 09:23 2016-05-10 09:23 · Answer 3 · 2016-05-10 09:23

Я нашел ответ здесь 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'),

user2077281 17 апр '19 в 05:54 2019-04-17 05:54 · Answer 4 · 2019-04-17 05:54

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

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

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

user1506793 01 сен '12 в 13:54 2012-09-01 13:54 · Answer 5 · 2012-09-01 13:54

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

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

Дайте мне знать, если вам нужна помощь, если у вас есть, или у вас есть еще вопросы по этому поводу. Удачи!:)

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

user45375 27 авг '13 в 21:34 2013-08-27 21:34 · Answer 6 · 2013-08-27 21:34

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

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

Прокрутите свою собственную прокрутку с помощью вспомогательной функции, как показано здесь - хотя это и просто реализовать, но это просто, поскольку она не дает вам инерционную прокрутку или избыточную прокрутку.
Используйте такую библиотеку, как iScroll, которая реализует собственную сложную прокрутку (инерционную, избыточную прокрутку) на основе CSS-преобразований.

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

user1969204 20 мар '13 в 06:06 2013-03-20 06:06 · Answer 7 · 2013-03-20 06:06

Ты пробовал это?

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

1

Источник

user1969204 20 мар '13 в 06:06

user5601169 14 июл '17 в 13:10 2017-07-14 13:10 · Answer 8 · 2017-07-14 13:10

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

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

1

Источник

user5601169 14 июл '17 в 13:10

user3780897 28 апр '19 в 05:13 2019-04-28 05:13 · Answer 9 · 2019-04-28 05:13

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

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

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

21 сен '21 в 18:29 2021-09-21 18:29 · Answer 10 · 2021-09-21 18:29

0

Источник

21 сен '21 в 18:29

user2310288 03 июл '13 в 05:41 2013-07-03 05:41 · Answer 11 · 2013-07-03 05:41

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>

0

Источник

user2310288 03 июл '13 в 05:41

user2823361 26 июл '14 в 14:37 2014-07-26 14:37 · Answer 12 · 2014-07-26 14:37

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

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

0

Источник

user2823361 26 июл '14 в 14:37

user1996926 21 янв '13 в 12:11 2013-01-21 12:11 · Answer 13 · 2013-01-21 12:11

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

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

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

0

Источник

user1996926 21 янв '13 в 12:11

user2318130 25 апр '13 в 04:09 2013-04-25 04:09 · Answer 14 · 2013-04-25 04:09

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

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

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

-2

Источник

user2318130 25 апр '13 в 04:09