जावास्क्रिप्ट window.scroll देरी अतुल्यकालिक

Question

पुनः बनाने लक्ष्य

का कारण बनता है तो मैं <div> की एक सूची किसी एकल स्तंभ लेआउट या तो वर्ग "सक्रिय" या "निष्क्रिय" है कि सभी s है। सक्रिय वर्ग आइटम के दाईं ओर एक ग्राफिक दिखाता है और निष्क्रिय वर्ग नहीं करता है। मैंने इसे सेटअप किया है ताकि ऊपर या नीचे तीर कुंजी को मारने से "सक्रिय" वर्ग (और इसके साथ ग्राफिक) पिछले या अगले आइटम पर जा सके। यह एनिमेटेड नहीं है, लेकिन आप ग्राफिक गायब होने और ऊपर या नीचे टैग पर फिर से दिखाई दे सकते हैं।

अब मैं पेज को तीर कीप्रेस पर स्क्रॉल करना चाहता हूं ताकि आइटम का शीर्ष किनारा हमेशा एक ही स्थान पर हो। चूंकि तत्व सूची पेज खिड़की से बड़ा है, यह स्वचालित रूप से ब्राउज़र स्क्रॉल करने के लिए इतना है कि चयनित <div> स्क्रीन के केंद्र में हमेशा होता है आवश्यक है ...

कोड

//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) 
    } 
}); 

समस्या

समस्या यह है कि सफारी के सभी संस्करणों, लेकिन कोई अन्य ब्राउज़र में, window.scroll विधि सीएसएस वर्ग परिवर्तन प्रदर्शन बुद्धिमान के पीछे सिर्फ एक सा है है। क्या होता है कि वे दो अलग-अलग रेड्रा घटनाओं में समाप्त होते हैं और ऐसा लगता है कि जब आप स्क्रॉल करते हैं तो पृष्ठ 'गड़बड़' होता है क्योंकि ब्राउज़र स्क्रॉल होने से पहले आप अगले तत्व के दाईं ओर ग्राफिक को संक्षेप में देख सकते हैं।

लाइव डेमो

आप इसे यहाँ रहते देख सकते हैं:

http://hashtag.ly/#minecraft

आइटम के माध्यम से पेज के लिए तीर कुंजियों का उपयोग करें। कूद पर ध्यान दें। मुझे इसे हल करने के लिए कैसे जाना चाहिए?

Answer 1

मुझे लगता है कि इस मुद्दे से बचने वाला एक समाधान आपकी सबसे अच्छी शर्त है।

एक यूएक्स परिप्रेक्ष्य से, जब मैं किसी साइट को ब्राउज़ कर रहा हूं, तो मुझे यह पसंद नहीं है जब साइट स्क्रॉल स्थिति का नियंत्रण करती है।

इसके अलावा, लम्बे-आश ब्राउज़र वाले लोगों (मेरे जैसे) के लिए वर्तमान में विवरण और चयनित पोस्ट के बीच बहुत सी सफेद अचल संपत्ति हो सकती है। (स्क्रीनशॉट देखें)

मेरे सिफारिश इसलिए विवरण चयनित पोस्ट के आगे दिखाई और उपयोगकर्ता स्क्रॉल करते हैं डिजाइन बदलने के लिए है। सीएसएस के साथ विवरण के locaiton को नियंत्रित, इसलिए वे चयनित पोस्ट के बगल में हैं, इसे एक ही रेंडर-चक्र में बाकी सब कुछ के रूप में रखेगा।

विवरण चयनित पोस्ट के करीब जा रहा है कुछ इस तरह दिख सकता है:

अद्यतन:

यह सोचने के लिए आओ, एओएल के ईमेल क्लाइंट ऑल्टो UX जिन्हें आपने है कार्यान्वित किया। अल्टो में, बाएं कॉलम स्वचालित रूप से स्क्रॉल करता है यदि आप कुंजी के साथ ब्राउज़ करते हैं। लेकिन, आप वास्तव में स्क्रॉल नहीं कर रहे हैं, वे कंटेनर तत्व में सामग्री जोड़ रहे हैं और इसे देखने में ला रहे हैं (मैं भूल जाता हूं कि इसे क्या कहा जाता है ... वर्चुअलाइजेशन?)। ऐसा लगता है कि वे सभी स्क्रॉल-संबंधित दृश्यों और व्यवहार का प्रबंधन कर रहे हैं, स्वयं, और मूल कार्यक्षमता का उपयोग नहीं कर रहे हैं। तो, यह सभी जेएस नियंत्रित सीएसएस और डोम हेरफेर है, वास्तव में scrollTo() आमंत्रण नहीं है। यह सब एक ही प्रस्तुत चक्र में डालता है।

Answer 2

div के बजाय बटन का उपयोग करने का प्रयास करें और विशिष्ट आइटम सक्रिय होने पर setfocus() का उपयोग करें। फोकस बटन हमेशा दिखाई देने के लिए ब्राउज़र स्वचालित रूप से स्क्रॉल करेगा। बटन को बिल्कुल div की तरह दिखने के लिए आप सीएसएस का उपयोग कर सकते हैं।