JavaScript powoduje opóźnienie window.scroll asynchroniczny przerysować

Question

bramki

Więc mam wykaz <div> wszystko w jednym układzie kolumny, które mają zarówno klasę „aktywny” lub „nieaktywny”. Klasa aktywna pokazuje grafikę po prawej stronie elementu, a klasa nieaktywna - nie. Mam to ustawione tak, że naciśnięcie klawisza strzałki w górę lub w dół powoduje przeniesienie "aktywnej" klasy (i grafiki z nią) do poprzedniego lub następnego elementu. Nie jest animowany, ale możesz zobaczyć, jak grafika znika i pojawia się ponownie na tagu powyżej lub poniżej.

Teraz chciałbym, aby strona przewijała strzałkę w dół, aby górna krawędź była zawsze w tym samym miejscu. Ponieważ lista elementów jest większa niż okno widoku, konieczne jest automatycznie przewijać przeglądarkę tak, że wybrana <div> jest zawsze w środku ekranu ...

Kodeks

//Paging through items with arrow keys 
theWindow.keydown(function (e) { 
    var key = e.keyCode, 
     oldItem = $('li.active') 

    if ((key === 40 && oldItem.next().length) || (key === 38 && oldItem.prev().length)) { 
     var theWindowMod = (window.innerHeight/2) + 43, 
      theHTML = $('html'), 
      theDetail = $('.detail') 

     theHTML.addClass('notransition') 

     if (key === 40 && oldItem.next().length) { 
      oldItem.removeClass('active').next().addClass('active') 
     } else if (key === 38 && oldItem.prev().length) { 
      oldItem.removeClass('active').prev().addClass('active') 
     } 

     var newItem = $('li.active') 

     window.scroll(0, newItem.offset().top - theWindowMod) 
     e.preventDefault() 
     $('.detail-inner.active').fadeOut(0).removeClass('active') 
     $('section.active, .tab.active').removeClass('active') 
     newItem.find('.tab').add(theDetail).addClass('active') 
     theDetail.find('.detail-' + newItem.attr('class').split(' ')[0]).addClass('active').fadeIn(0) 

     setTimeout(function() { 
      theHTML.removeClass('notransition') 
     }, 1) 
    } 
}); 

Problem

Problem polega na tym, że we wszystkich wersjach Safari, ale nie w żadnej innej przeglądarce, metoda window.scroll jest nieco w tyle pod względem wydajności przełączania klas CSS. To, co się dzieje, kończy się dwoma różnymi przerysowanymi zdarzeniami i wygląda na to, że strona "glitchuje" podczas przewijania w dół, ponieważ możesz krótko zobaczyć grafikę po prawej stronie następnego elementu, zanim przeglądarka przewinie się w dół.

Live Demo

można zobaczyć go na żywo tutaj:

http://hashtag.ly/#minecraft

pomocą klawiszy strzałek do strony poprzez przedmioty. Zwróć uwagę na skok. Jak mam rozwiązać ten problem?

Answer 1

Myślę, że najlepszym wyjściem jest rozwiązanie, które pozwala uniknąć problemu.

Z punktu widzenia UX, gdy przeglądam witrynę, nie podoba mi się, gdy strona uzurpuje sobie kontrolę nad pozycją przewijania.

Ponadto, dla osób z wysokimi przeglądarkami (takimi jak ja) obecnie, pomiędzy szczegółami i wybranym postem może być wiele białych nieruchomości. (Patrz zrzut ekranu)

Moja rada jest taka, aby zmienić projekt tak szczegóły pojawiają się obok wybranego wpisu i pozwolić użytkownikowi zrobić przewijanie. Kontrolowanie lokalizacji szczegółów za pomocą CSS, dzięki czemu znajdują się one obok wybranego postu, wprowadzą go w ten sam cykl renderowania, jak wszystko inne.

Dane będące bliżej wybranym stanowisku może wyglądać tak:

Aktualizacja:

Przyjdź, aby myśleć o tym, AOL email klient Alto ma UX, że już wdrożony. W Alto lewa kolumna nie przewija się automatycznie, jeśli przeglądasz za pomocą klawiszy. Ale w rzeczywistości nie przewijasz, dodają zawartość do elementu kontenera i wyświetlają go (zapominam, jak to się nazywa ... wirtualizacja?). Wygląda na to, że zarządzają wszystkimi efektami i zachowaniami związanymi z przewijaniem, sami i nie korzystają z natywnej funkcjonalności. Tak więc, wszystkie manipulacje sterowane przez JS i CSS są kontrolowane przez JS, tak naprawdę nie ma inwokacji scrollTo(). Wszystko to składa się w tym samym cyklu renderowania.

Answer 2

Spróbuj użyć przycisku zamiast div i użyj setfocus(), gdy określony element jest aktywny. Przeglądarka automatycznie przewinie się, aby przycisk skupienia był zawsze widoczny. Możesz użyć CSS, aby przycisk wyglądał dokładnie jak div.