Javascript ile kaydırma çubuğu konumu nasıl alınır?

Geçerli görünümde sayfada nerede olduğuna karar vermek için JavaScript ile tarayıcının kaydırma çubuğunun konumunu tespit etmeye çalışıyorum. Benim tahminim, parçanın başparmağının nerede olduğunu ve ardından parçanın toplam yüksekliğinin bir yüzdesi olarak başparmağın yüksekliğini tespit etmem gerektiğidir. Aşırı karmaşık mıyım yoksa JavaScript bundan daha kolay bir çözüm sunuyor mu? Herhangi bir fikir kod bilge?

Sen kullanabilirsiniz element.scrollTopve element.scrollLeftofset dikey ve yatay sırasıyla bu kaydırıldığını olsun. tüm sayfayı önemsiyorsanız elementolabilir document.body. Sen karşılaştırabilirsiniz element.offsetHeightve element.offsetWidth(yine elementsen yüzdeleri gerekiyorsa vücut olabilir).

Bunu <div>Chrome'da bir için yaptım .

element .scrollTop - kaydırma nedeniyle üstte gizlenmiş piksellerdir. Kaydırma olmadan değeri 0'dır.

element .scrollHeight - tüm div'in pikselidir .

element .clientHeight - tarayıcınızda gördüğünüz piksellerdir.

var a = element.scrollTop;

pozisyon olacak.

var b = element.scrollHeight - element.clientHeight;

scrollTop için maksimum değer olacaktır .

var c = a / b;

[0'dan 1'e] kaydırma yüzdesi olacaktır .

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

iki tamsayı içeren bir dizi döndürür- [scrollLeft, scrollTop]

bunun gibi :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

2018 için cevap :

Bunun gibi şeyler yapmanın en iyi yolu Kesişim Gözlemci API'sını kullanmaktır .

Kesişim Gözlemcisi API'si, bir hedef öğenin bir üst öğe veya üst düzey bir belgenin görünüm alanı ile kesişimindeki değişiklikleri eşzamansız olarak gözlemlemek için bir yol sağlar.

Tarihsel olarak, bir öğenin görünürlüğünü veya iki öğenin birbiriyle ilişkili göreli görünürlüğünü tespit etmek, çözümlerin güvenilir olmadığı ve tarayıcının ve kullanıcının eriştiği sitelerin halsizleşmesine neden olmaya zorlandığı zor bir iş olmuştur. Ne yazık ki, web olgunlaştıkça, bu tür bilgilere duyulan ihtiyaç artmıştır. Kavşak bilgisine aşağıdakiler gibi birçok nedenden dolayı ihtiyaç duyulur:

• Bir sayfa olarak görüntülerin veya diğer içeriklerin tembel olarak yüklenmesi kaydırma yapar.
• Siz kaydırdıkça daha fazla içeriğin yüklendiği ve oluşturulduğu "sonsuz kaydırma" web sitelerinin uygulanması, böylece kullanıcının sayfalar arasında gezinmesi gerekmez.
• Reklam gelirlerini hesaplamak için reklamların görünürlüğünün raporlanması.
• Kullanıcının sonucu görüp görmeyeceğine göre görevlerin veya animasyon işlemlerinin gerçekleştirilip gerçekleştirilmeyeceğine karar verme.

Geçmişte kavşak algılamanın uygulanması, etkilenen her öğe için gerekli bilgileri oluşturmak üzere olay işleyicileri ve döngüler çağıran yöntemleri Element.getBoundingClientRect () içeriyordu. Tüm bu kod ana iş parçacığında çalıştığından, bunlardan biri bile performans sorunlarına neden olabilir. Bir site bu testlerle yüklendiğinde, işler çirkinleşebilir.

Aşağıdaki kod örneğine bakın:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

Çoğu modern tarayıcı IntersectionObserver'ı destekler , ancak geriye dönük uyumluluk için çoklu dolguyu kullanmalısınız .

tüm sayfayı önemsiyorsanız. bunu kullanabilirsiniz:

document.body.getBoundingClientRect().top

JQuery kullanıyorsanız sizin için mükemmel bir işlev vardır: .scrollTop ()

burada doküman -> http://api.jquery.com/scrollTop/

not: bu işlevi almak için VEYA konumu ayarlamak için kullanabilirsiniz.

ayrıca bkz: http://api.jquery.com/?s=scroll

Kaydırma pozisyonunu almanın diğer yolu

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Aşağıdaki fonksiyonun kaydırma koordinat değerlerine sahip olmasına yardımcı olabileceğini düşünüyorum:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

Bu fikri küçük bir değişiklikle bu cevaptan aldım .