scrollLeft और scrollTop को एक साथ सेट करें

Question

क्या scrollLeft सेट करने और एक साथ div की scrollTop सेट करने का कोई तरीका है? क्रोम, सफारी और ओपेरा में यह क्रमशः उन्हें सेट करके काम करता है लेकिन फ़ायरफ़ॉक्स (4 से अधिक पुराना) और आईई (यहां तक ​​कि आईई 9 में भी!) में से एक को रिफ्लो का कारण बनता है जिसके परिणामस्वरूप बदसूरत ग्लिच होते हैं क्योंकि पृष्ठ पहले बाएं स्थानांतरित हो जाएगा, एक सीढ़ी गति की तरह।

मुझे लगता है कि विंडो में scrollTo (x, y) नामक एक विधि है, क्या सामान्य divs के लिए कोई समतुल्य है?

या, ब्राउज़र के व्यवहार को बदलना संभव है, इसलिए रीफ्लो केवल स्क्रॉल को बदलने पर ट्रिगर नहीं होगा। एक स्रोत मैंने पाया कि यह केवल तब होगा जब मेरे पास div पर पंजीकृत ऑनस्कोल-ईवेंट है लेकिन मेरे पास ऐसा कोई नहीं है जिससे समस्या न हो।

Answer 1

आपको scrollLeft और scrollTop का उपयोग नहीं करना चाहिए, आपको scrollLeft और scrollTop को .animate() का उपयोग करके सेट करना चाहिए।

.animate({ 
    .scrollLeft: x, 
    .scrollTop: y 
}) 

भी कई प्रक्रिया को सरल http://plugins.jquery.com/project/ScrollTo से बनाया गया प्लगइन्स रहे हैं।

Answer 2

मैं कल्पना कर सकते हैं कि एक एनीमेशन इस (सबसे जावास्क्रिप्ट चौखटे यह काम हो जाएगा) के लिए सबसे अच्छा तरीका हो सकता है, लेकिन आप भी इस कोशिश कर सकते:

setTimeout("verticalScrollFunction", 1); 
setTimeout("horizontalScrollfunction", 1); 

Answer 3

मैं इस एक ही मुद्दा हो रही थी कुछ ही क्षण पहले। मैंने पाया कि एनिमेट सुझाव अच्छा नहीं था (अजीब, लगी, आखिरकार बदतर), लेकिन आपूर्ति की गई jQuery प्लगइन जो कम से कम मामूली रूप से बेहतर थी। मेरे लिए, यह आवश्यक ओवरहेड वास्तव में छोटे लाभ के लायक नहीं था।

मेरी स्थिति में, मेरे अंदर एक बड़ी छवि के साथ स्क्रोल करने योग्य div है। इस छवि जितनी बड़ी होगी, उतना ही बदतर होगा। मैं स्क्रॉल गुणों को सेट करने से पहले को स्थिति को काफी हद तक सुधारने में सक्षम था, फिर इसे के तुरंत बाद इसे फिर से दिखा रहा था। यह आईई को पहली संपत्ति सेट करने के बाद सामग्री को पुन: प्रस्तुत करने की अनुमति देता है, और इसके बजाय तब तक प्रतीक्षा करें जब तक तत्व "दृश्यमान" न हो (दोनों सेट होने के बाद)।

किसी भी प्रमुख ब्राउज़र (जो मेरी पहली चिंता थी) के किसी मौजूदा संस्करण में कोई झिलमिलाहट प्रतीत नहीं होता है। फ़ायरफ़ॉक्स 4, ओपेरा 11, क्रोम 10, IE 8, IE8 संगतता, और सफारी में परीक्षण किया गया 5.

jQuery में:

var my_pane = $('#my_scroll_pane'); 
my_pane.css('visibility', 'hidden'); 
my_pane.scrollTop(100).scrollLeft(100); 
my_pane.css('visibility', 'visible'); 

नियमित OLE 'जावास्क्रिप्ट:

var scroll_pane = document.getElementById('my_scroll_pane'); 
scroll_pane.style.visibility = 'hidden'; 
scroll_pane.scrollTop = 100; 
scroll_pane.scrollLeft = 100; 
scroll_pane.style.visibility = 'visible'; 

अद्यतन : यह FF3.6 में मोटे तौर पर झिलमिलाहट करता है। अगर किसी के पास कोई विचार है जिसमें ब्राउजर स्नीफिंग शामिल नहीं है, तो किसी भी इनपुट का स्वागत होगा।

Answer 4

स्क्रॉलिंग के बजाए पूर्ण स्थिति या शून्य मार्जिन का उपयोग करें।