jquery scrolltop() önceki kaydırma konumuna

Question

Ben aşağıdaki satırı kullanarak sayfanın geçerli kaydırma konumu almak için jquery işlevini element.scrollTop() kullanıyorum değerini döndürür:

var currentScrollPosition= $('html').scrollTop() || $('body').scrollTop(); 

Ama her zaman bir önceki kaydırma konumunun bir değeri döndürür. Lütfen aşağıdaki kodu kontrol edin (in here ile aynıdır). değerlerin kendinizi deneyebilirsiniz gibi, kodda bakın her minik kaydırma sonra, aşağıdaki olsun serisi:

(1: Kod ilk çalıştırma ve hiçbir hamle henüz yapılır)

delta : 0

cumulativeDelta: 0

functionCallCount: 0

currentScrollPosition: 0

01.235.164:

(biraz kaydırılan 2) (delta kaydırılan ne kadar verir, cumulativeDelta functionCallCount kaydırılan kaç kez ve currentScrollPosition() scrolltop tarafından döndürülen değer, kaydırma toplam miktarını verir)

ö: -120

cumulativeDelta: -120

functionCallCount: 1

01.235.

currentScrollPosition: 0

(burada dikkat currentScrollPosition hala güncellenmediyse)

(3: biraz daha kaydırıldığında)

delta: -120

cumulativeDelta: -240

functionCallCount: 2

currentScrollPosition: 90,90908893868948

(burada, iki katına ve currentScrollPosition ilk kez güncellenir bugüne kadar yapılan toplam kaydırma eklenmesidir cumulativeDelta,)

(4: biraz kaydırıldığında daha fazla)

ö: -120

cumulativeDelta: -360

functionCallCount: 3

currentScrollYükleme: 181.81817787737896

(şimdi, cumulativeDelta currentScrollPosition katına iken. Dolayısıyla, bu iki kaydırma yaptıktan sonra değerdir üçe ancak adter 3 parşömenlerini güncellenir)

Uzun soru için özür dilerim, ama sormak zor olurdu aksi takdirde. Bunun neden olduğunu bilmek isterim ve eğer bu işlevi kullanmam gerekirse, başka bir şekilde bu işleve herhangi bir alternatif var.

document.addEventListener("mousewheel", MouseWheelHandler); 
 
var cumulativeDelta = 0, 
 
    functionCallCount = 0; 
 

 
function MouseWheelHandler(e) { 
 
    e = window.event || e; // 'event' with old IE support 
 
    var delta = e.wheelDelta || -e.detail; // get delta value 
 

 
    cumulativeDelta += delta; 
 
    functionCallCount += 1; 
 
    currentScrollPosition = $('html').scrollTop() || $('body').scrollTop(); 
 

 
    document.getElementById("info1").innerHTML = "delta:" + delta; 
 
    document.getElementById("info2").innerHTML = "cumulativeDelta:" + cumulativeDelta; 
 
    document.getElementById("info3").innerHTML = "functionCallCount:" + functionCallCount; 
 
    document.getElementById("info4").innerHTML = "currentScrollPosition:" + currentScrollPosition; 
 

 
}

body { 
 
    height: 2000px; 
 
    border: solid red 3px; 
 
} 
 
.normalPart { 
 
    border: solid green 2px; 
 
    height: 900px; 
 
} 
 
.stationary { 
 
    position: fixed; 
 
    top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<div class="stationary"> 
 
    <div id="info1"></div> 
 
    <div id="info2"></div> 
 
    <div id="info3"></div> 
 
    <div id="info4"></div> 
 
</div>

Answer 1

Fare tekerleğinin olayı harekete Fare tekerleğinin hareketi başladığında çünkü konudur. scrollTop,'dan önce numaralı noktayı okuyorsunuz, güncelleme gerçekleşti.'un ardından scrollTop'u almak için bir zamanlayıcı kullanmanız gerekir; fare tekerleği kaydırma işlemi bitti. Bu deneyin: bu her zaman güncel pozisyonundan ile senkronize olacak şekilde

document.addEventListener("mousewheel", MouseWheelHandler); 
 
var cumulativeDelta = 0, 
 
    functionCallCount = 0, 
 
    currentScrollPosition = 0; 
 

 
function MouseWheelHandler(e) { 
 
    e = window.event || e; // 'event' with old IE support 
 
    var delta = e.wheelDelta || -e.detail; // get delta value 
 

 
    cumulativeDelta += delta; 
 
    functionCallCount += 1; 
 

 
    setTimeout(function() { 
 
     currentScrollPosition = $(window).scrollTop(); 
 
     document.getElementById("info4").innerHTML = "currentScrollPosition:" + currentScrollPosition; 
 
    }, 200); // update currentScrollPos 200ms after event fires 
 

 
    document.getElementById("info1").innerHTML = "delta:" + delta; 
 
    document.getElementById("info2").innerHTML = "cumulativeDelta:" + cumulativeDelta; 
 
    document.getElementById("info3").innerHTML = "functionCallCount:" + functionCallCount; 
 
}

body { 
 
    height: 2000px; 
 
    border: solid red 3px; 
 
} 
 
.normalPart { 
 
    border: solid green 2px; 
 
    height: 900px; 
 
} 
 
.stationary { 
 
    position: fixed; 
 
    top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<div class="stationary"> 
 
    <div id="info1"></div> 
 
    <div id="info2"></div> 
 
    <div id="info3"></div> 
 
    <div id="info4"></div> 
 
</div>

Alternatif pencerenin kaydırma olayı doğrudan currentScrollTop pozisyonunu okuyabilir.