Reaktif

Question

'da kaydırma konumu göstergesi oluşturma React'ta bir kaydırma göstergesi ilerleme çubuğunu kodlamaya çalışıyorum. Jquery ile çalışıyorum ama bunu nasıl yapılacağını bilmek istiyorum.

componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll); 
    } 

    handleScroll() { 
    var winHeight = $(window).height(), 
     docHeight = $(document).height(), 
     value = $(window).scrollTop(), 
     max, percent; 

    max = docHeight - winHeight; 
    percent = (value/max) * 100; 
    this.props.updatePercent(percent); 
    } 

Ayrıca, bunu saf Javascript'te yapmaktan rahatsız mıyım? Jquery'nin React'ta kullanılmaması gerektiği söylendi.

Answer 1

JQuery'yi kullandığınız tek yer burası mı? Eğer öyleyse, saf javascript için onu devrederek tavsiye ederim. JQuery ile yapabileceğiniz her şey, React ve salt JavaScript ile de yapabileceğiniz bir şeydir ve buradaki genel giderlere değmez.

handleScroll İşlevinin tam bir JavaScript sürümüdür. Belge boyunun hesaplanmasında rahatsızlık verici olduğunu unutmayın, ancak this question (JQuery'nin uygulamasını yeniden üretir) yaklaşımını ele aldım.

handleScroll() { 
    var winHeight = window.innerHeight; 

    // Annoying to compute doc height due to browser inconsistency 
    var body = document.body; 
    var html = document.documentElement; 
    var docHeight = Math.max(body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight); 

    var value = document.body.scrollTop; 
    ... 
} 

Güncelleme

bir öğesi içinde kaydırma konumu almak istiyorsanız, size ikinci soruya cevap vermek için

var el = document.getElementById('story_body'); 
var minPixel = el.offsetTop; 
var maxPixel = minPixel + el.scrollHeight; 
var value = document.body.scrollTop; 

// respect bounds of element 
var percent = (value - minPixel)/(maxPixel - minPixel); 
percent = Math.min(1,Math.max(percent, 0))*100; 

Answer 2

gibi bir şey gerekir: Bu özel durumda, jQuery'ye (vanilla javascript versiyonunu tercih etsem de) sadık kalabilirsiniz. (Örneğin DOM'da bileşen yükseklik olarak ya sizin durumunuzda pozisyon kaydırın) tepki bilinmeyen gerçek DOM gelen

• okuma bilgi: With

  onun için jQuery kullanmak mükemmel Tamam, tepki

  • manipüle: With
  • ajax şeyler

  için jQuery KULLANMAYIN gerektiğini tepki DOM doğrudan: sadece DOM'u reaksiyon yoluyla manipüle eder. (tepkime jQuery ile manipüle etmek büyük bir sorun için bir garantidir)

• Bir giriş alanının değeri gibi tepki vermesi bilinen ve bilinmesi gereken DOM bilgilerinin okunması. (şeyler gerçekten kırılmaz, ancak reaksiyonunuzun sıkı tasarım yönergelerini atlatmak için jQuery kullanırsanız tepki kodunuzu hata ayıklaması yapar)