लंबन स्क्रॉलिंग समस्या - वेबकिट ब्राउज़र में स्क्रॉल करते समय div तत्व jerking

Question

मैंने एक लंबन स्क्रॉल बनाया है, जो फ़ायरफ़ॉक्स में ठीक काम कर रहा है, हालांकि क्रोम ब्राउज़र में स्क्रॉल करते समय बॉडी टेक्स्ट पर थोड़ी सी कूद है। click here scroll to the about section। मुझे यकीन नहीं है कि यह एक सीएसएस या जेएस मुद्दा है .. नीचे एक स्निपेट है जिसे मैंने अपने लंबन समारोह में शामिल किया है

क्या कोई जानता है कि मैं इस समस्या को कैसे ठीक करता हूं?

$(document).ready(function(){ 

// Cache the Window object 
$window = $(window); 

// Cache the Y offset and the speed of each sprite 
$('[data-type]').each(function() { 
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY'))); 
    $(this).data('Xposition', $(this).attr('data-Xposition')); 
    $(this).data('speed', $(this).attr('data-speed')); 
}); 

// For each element that has a data-type attribute 
$('[data-type="background"]').each(function(){ 


    // Store some variables based on where we are 
    var $self = $(this), 
     offsetCoords = $self.offset(), 
     topOffset = offsetCoords.top; 


    // When the window is scrolled... 
    $(window).scroll(function() { 

     // If this section is in view 
     if (($window.scrollTop() + $window.height()) > (topOffset) && 
      ((topOffset + $self.height()) > $window.scrollTop())) { 

      // Scroll the background at var speed 
      // the yPos is a negative value because we're scrolling it UP!        
      var yPos = -($window.scrollTop()/$self.data('speed')); 

      // If this element has a Y offset then add it on 
      if ($self.data('offsetY')) { 
       yPos += $self.data('offsetY'); 
      } 

      // Put together our final background position 
      var coords = '50% '+ yPos + 'px'; 

      // Move the background 
      $self.css({ backgroundPosition: coords }); 

      $('[data-type="scroll-text"]', $self).each(function() { 
        var $text= $(this); 
        var pos = ($window.scrollTop()/10) * $text.data('speed'); 
        var curP = $text.css('margin-top'); 
        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
        if(is_chrome) { 
         $text.animate({ 
         paddingTop: pos, 
         }, 200, 'linear', function() { 
          // Animation complete. 
         }); 
        } else { 
        $text.css('padding-top', pos); 
        } 
      }); 

     }; // in view 

    }); // window scroll 

}); // each data-type 


     }); // document ready 

Answer 1

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

उदाहरण के लिए, अपने पृष्ठ पर आप प्रत्येक <div> टैग को एक निश्चित स्थिति रखने के लिए पाठ युक्त टैग सेट करेंगे और फिर top: सीएसएस तत्व को अद्यतन करने के लिए जावास्क्रिप्ट/JQuery फ़ंक्शन का उपयोग करें। यह पृष्ठ को आसानी से स्क्रॉल करना चाहिए।

Answer 2

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

Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;"> 
FireFox: <div id="about-title" style="margin-top: 1562.4px;"> 

ब्राउज़र सामग्री 1/2 पिक्सेल पर बैठने के लिए, अकेले एक पिक्सेल की .३९,९९,९९९ अनुमति देने के लिए नहीं जा रहे हैं। मुझे लगता है कि यह इसे आगे बढ़ रहा है, और गणना करने की कोशिश कर रहा है कि गोल करने या गोल करने के लिए। यह झटके क्योंकि यह आपके माउस व्हील के हर क्लिक के साथ गणना कर रहा है।

इस प्रकार, मैं आपके पदों पर Math.round() जोड़ने की कोशिश करता हूं ताकि कंटेनरों को कभी भी लिम्बो में नहीं छोड़ा जा सके।

कोड यहाँ पर एक नज़र डालें: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug तत्वों में से कुछ, और आप देखेंगे कि उनके एक पिक्सेल का ही अंश है '0.5'। उनमें से अधिकतर (थोक) गोल संख्या मानों पर जाते हैं।

Answer 3

क्या आपने स्क्रॉल फ़ंक्शन के अंदर preventdefault जोड़ने का प्रयास किया है?

$(window).scroll(function(e) { 
    e.preventDefault(); 
    // rest of your code 
} 

Answer 4

कुछ सुझाव:

1.) का प्रयोग करें position: fixed किसी भी घबराना से बचने के लिए, जैसा कि आप दस्तावेज़ प्रवाह से बाहर तत्व ले चलूंगा। इसके बाद आप इसे z-index का उपयोग कर स्थिति बना सकते हैं।

2.) प्रोसेसिंग समय को कम करने के लिए जितना हो सके उतना कैश करें।

3.) Math.round आवश्यक नहीं हो सकता है, लेकिन इस सीएसएस को अपने चलती क्षेत्रों में जोड़ने का प्रयास करें: -webkit-transform: translate3d(0,0,0); यह क्रोम में हार्डवेयर त्वरण को मजबूर करेगा, जो कुछ झटके को कम कर सकता है। (जब मैंने इंस्पेक्टर के साथ इसे जोड़ा, तो यह मेरी स्क्रीन पर चिकनी लग रही थी, लेकिन स्क्रॉल व्हील के साथ जंपनेस से छुटकारा नहीं मिला।) नोट: इसे अपने पूरे दस्तावेज़ (उदाहरण के लिए बॉडी टैग) पर न करें, क्योंकि यह हो सकता है आपके वर्तमान लेआउट के साथ कुछ मुद्दों का कारण बनता है। (उदाहरण के लिए, आपकी नेविगेशन बार खिड़की के शीर्ष तक नहीं टिकी थी।)

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

उम्मीद है कि इससे मदद मिलती है। शुभकामनाएँ।

Answer 5

पिछले प्रश्न में मैंने काफी अच्छा लंबन स्क्रॉलिंग कार्यान्वयन बनाया था। Jquery Parallax Scrolling effect - Multi directional आपको यह उपयोगी लगेगा।

यहां जेएसफ़िल्ड http://jsfiddle.net/9R4hZ/40/ ऊपर/नीचे तीरों या स्क्रॉल व्हील का उपयोग करें।

स्थिति के लिए पैडिंग और मार्जिन का उपयोग करना संभवतः आप समस्याओं को प्रस्तुत करने का अनुभव क्यों कर रहे हैं। जबकि मेरा कोड प्रभाव के लिए स्क्रॉल या कीबोर्ड इनपुट का उपयोग करता है, आप रिलेवेंट भाग को लूप कर सकते हैं और जब तक आप स्क्रीन पर वांछित तत्व तक नहीं पहुंच जाते हैं तब तक $ चलती चर की जांच करें।

function parallaxScroll(scroll) { 
    // current moving object 
    var ml = $moving.position().left; 
    var mt = $moving.position().top; 
    var mw = $moving.width(); 
    var mh = $moving.height(); 
    // calc velocity 
    var fromTop = false; 
    var fromBottom = false; 
    var fromLeft = false; 
    var fromRight = false; 
    var vLeft = 0; 
    var vTop = 0; 
    if($moving.hasClass('from-top')) { 
     vTop = scroll; 
     fromTop = true; 
    } else if($moving.hasClass('from-bottom')) { 
     vTop = -scroll; 
     fromBottom = true; 
    } else if($moving.hasClass('from-left')) { 
     vLeft = scroll; 
     fromLeft = true; 
    } else if($moving.hasClass('from-right')) { 
     vLeft = -scroll; 
     fromRight = true; 
    } 
    // calc new position 
    var newLeft = ml + vLeft; 
    var newTop = mt + vTop; 
    // check bounds 
    var finished = false; 
    if(fromTop && (newTop > t || newTop + mh < t)) { 
     finished = true; 
     newTop = (scroll > 0 ? t : t - mh); 
    } else if(fromBottom && (newTop < t || newTop > h)) { 
     finished = true; 
     newTop = (scroll > 0 ? t : t + h); 
    } else if(fromLeft && (newLeft > l || newLeft + mw < l)) { 
     finished = true; 
     newLeft = (scroll > 0 ? l : l - mw); 
    } else if(fromRight && (newLeft < l || newLeft > w)) { 
     finished = true; 
     newLeft = (scroll > 0 ? l : l + w); 
    } 
    // set new position 
    $moving.css('left', newLeft); 
    $moving.css('top', newTop); 
    // if finished change moving object 
    if(finished) { 
     // get the next moving 
     if(scroll > 0) { 
      $moving = $moving.next('.parallax'); 
      if($moving.length == 0) 
       $moving = $view.find('.parallax:last'); 
     } else { 
      $moving = $moving.prev('.parallax'); 
      if($moving.length == 0) 
       $moving = $view.find('.parallax:first'); 
     } 
    } 
    // for debug 
    $('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text()); 
}