跨浏览器方法确定Javascript中的垂直滚动百分比

Question

如何找出用户在任何给定点移动的垂直滚动条的百分比？

当用户向下滚动页面时,很容易捕获"onscroll"事件,但是如何在该事件中找出它们滚动了多远？在这种情况下,特别是百分比是重要的.我并不特别担心IE6的解决方案.

是否有任何主要框架(Dojo,jQuery,Prototype,Mootools)以简单的跨浏览器兼容方式公开它？

干杯,

Answer 1

2016年10月:修正.jsbin演示中的括号在答案中丢失了.哎呀.

Chrome,Firefox,IE9 +.在jsbin上现场演示

var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

作为功​​能:

function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}

如果您愿意jQuery(原始答案):

$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
  
  console.clear();
  console.log(scrollPercent);
})

html{ height:100%; }
body{ height:300%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我想我找到了一个不依赖于任何库的好解决方案:

/**
 * Get current browser viewpane heigtht
 */
function _get_window_height() {
    return window.innerHeight || 
           document.documentElement.clientHeight ||
           document.body.clientHeight || 0;
}

/**
 * Get current absolute window scroll position
 */
function _get_window_Yscroll() {
    return window.pageYOffset || 
           document.body.scrollTop ||
           document.documentElement.scrollTop || 0;
}

/**
 * Get current absolute document height
 */
function _get_doc_height() {
    return Math.max(
        document.body.scrollHeight || 0, 
        document.documentElement.scrollHeight || 0,
        document.body.offsetHeight || 0, 
        document.documentElement.offsetHeight || 0,
        document.body.clientHeight || 0, 
        document.documentElement.clientHeight || 0
    );
}


/**
 * Get current vertical scroll percentage
 */
function _get_scroll_percentage() {
    return (
        (_get_window_Yscroll() + _get_window_height()) / _get_doc_height()
    ) * 100;
}

Answer 3

这应该可以解决问题,不需要库:

function currentScrollPercentage()
{
    return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}

Answer 4

这些在 Chrome 19.0、FF12、IE9 中对我来说非常有效：

function getElementScrollScale(domElement){
        return domElement.scrollTop / (domElement.scrollHeight - domElement.clientHeight);
    }

function setElementScrollScale(domElement,scale){
        domElement.scrollTop = (domElement.scrollHeight - domElement.clientHeight) * scale;
    }

Answer 5

每个人都有很好的答案，但我只需要一个答案作为一个变量。我不需要事件侦听器，我只是想获取滚动百分比。这就是我得到的：

const scrolledPercentage = 
    window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)

const scrolledPercentage = 
    window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)

document.addEventListener("scroll", function() {
  const height = window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)

  document.getElementById("height").innerHTML = `Height: ${height}`
})

.container {
  position: relative;
  height: 200vh;
}

.sticky-div {
  position: sticky;
  top: 0;
}