Невозможно остановить прокрутку внешнего div, когда конец внутреннего div достиг

Use Case: - Если пользователь прокручивает внутренний div, он не должен прокручивать внешний div, как только достигнут внутренний div.Невозможно остановить прокрутку внешнего div, когда конец внутреннего div достиг

Следующий код работает отлично, если внутренний div уже достиг конца. т. е. событие touchstart/touchmove запускается после завершения внутреннего div.

Но в случае, если я не поднимаю прикосновение и держу прокрутку, и если конец внутреннего div достигнут в этом процессе, он начинает прокручивать внешний div.

$('body').find('.scrollableDiv').on(
    { 
     'touchstart' : function(e) { 
     touchStartEvent = e; 
     }, 
     'touchmove' : function(e) { 
     e.stopImmediatePropagation(); 
     $this = $(this); 
     if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
      (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){ 
      e.preventDefault(); 
     } 
     }, 
    });

Как остановить прокрутку, как только достигнут конец внутреннего div? Я пытаюсь добиться этого в браузере на Android-устройстве. Может ли кто-нибудь помочь мне в этом отношении?

ПРИМЕЧАНИЕ. Пользователь должен иметь возможность прокручивать внешний div.

Заранее спасибо.

источник

2013-08-21 Sashwat

Это ударяет меня как плохая идея. Вы пытаетесь написать код, который принадлежит самому веб-браузеру, чтобы изменить пользовательский интерфейс браузера на вашем сайте таким образом, который несовместим с тем, как он работает на других сайтах, отключив функцию, которую может пожелать пользователь , –

Прошу прощения, если я не уточню.На самом деле я пытаюсь дать функциональность, в которой пользователь может прокручивать оба div независимо, а прокрутка внутреннего div никогда не должна прокручивать внешний div. Рассмотрим ситуацию, когда пользователь выполнил быструю прокрутку во внутреннем div, что приведет к прокрутке страницы, как только внутренний div достигнет конца, а затем пользователь должен прокрутить страницу вверх, чтобы довести внутренний div до видимого Посмотреть. Разве это не плохой UX? – Sashwat

Mozilla, похоже, согласен с вами, так как Firefox не делает этого на любой платформе, либо на рабочем столе (с помощью колеса), либо на мобильном телефоне (пальцем). Apple, похоже, не согласна с вами. Я думаю, что, вероятно, там, где решение принадлежит, и попытка заставить его работать по-разному на разных сайтах, само по себе является плохим UX. –

Если вы используете JQuery, я бы использовал что-то, что использует scrollTop(), чтобы проверить, достиг ли пользователь до дна прокручиваемого div, и если да, возможно, инициирует событие, которое отменяет их прокрутку дальше? Или что-то, что вы можете захотеть сделать.

Что-то вдоль линий:

$(document).ready(function(){ 
    $('.scrollableDiv').bind('scroll',scroll_check); 
}); 

function scroll_check(e){ 
    var elem = $(e.currentTarget); 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){ 
     // set overflow-y hidden? 
    } 
}

источник

2013-08-27 22:18:20

прокрутка в основном называется после того, как объект/div уже прокручивается. Вот ссылка. http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ – Sashwat

Боюсь, у меня нет времени, чтобы написать явный код, чтобы решить это, но у меня есть концептуальное решение для вас, что все еще может помочь вы.

В DOM готов, оберните каждый перелив: элемент прокрутки с оберткой с position: relative.
На сенсорном старте, для каждого предка с overflow: scroll установите overflow: visible, position: absolute, получить расчетную высоту & ширину и применять их в качестве встроенных стилей, и установить верхнюю быть негативом scrollTop - и установить обертки overflow к hidden: это означает, он будет в том же положении, в котором он был в первую очередь, но не мог передвигаться по прокрутке.
На сенсорном конце, удалите стили, применяемые на этапе 2.

я уже вижу предостережения:

Если вы используете относительное или абсолютное позиционирование для размещения в вашем переливе: прокручивать элементы (и они не имеют относительного или абсолютного позиционирования сами), это будет зависеть от вашего макета.
Если какие-либо элементы прокрутки завернуты после готовности DOM, вам необходимо применить обертку для каждого.

... но это вполне реально ...

источник

2013-09-02 16:56:31 Barney

Невозможно остановить прокрутку внешнего div, когда конец внутреннего div достиг

ответ

Смежные вопросы