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

Question

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

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

是否有任何主要框架（Dojo，jQuery，Prototype，Mootools）以简单的跨浏览器兼容方式公开这个框架？

Answer 1

  

2016年10月：已修复。 jsbin演示中的括号在答案中丢失了。 糟糕。

Chrome，Firefox，IE9 +。 Live Demo on 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

如果您正在使用Dojo，则可以执行以下操作：

var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));

将返回介于0和1之间的值。

Answer 6

这个问题已经存在很长时间了，我知道，但是我在试图解决同样的问题时偶然发现了它。以下是我在jQuery中解决它的方法：

首先，我把想要在div中滚动的东西包裹起来（不是语义，但它有帮助）。然后在包装器上设置溢出和高度。

<div class="content-wrapper" style="overflow: scroll; height:100px">
    <div class="content">Lot of content that scrolls</div>
</div>

最后，我能够根据这些指标计算百分比滚动：

var $w = $(this),
    scroll_top = $w.scrollTop(),
    total_height = $w.find(".content").height(),        
    viewable_area = $w.height(),
    scroll_percent = Math.floor((scroll_top + viewable_area) / total_height * 100);                

以下是工作示例的小提琴：http://jsfiddle.net/prEGf/

Answer 7

var maxScrollTop = messages.get(0).scrollHeight - messages.height();
var scroll = messages.scrollTop() / maxScrollTop; // [0..1]

Answer 8

首先将事件监听器附加到您想要跟踪的某个文档

yourDocument.addEventListener("scroll", documentEventListener, false);

然后：

function documentEventListener(){
  var currentDocument  = this;
  var docsWindow       = $(currentDocument.defaultView); // This is the window holding the document
  var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
  var scrollTop        = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
  var docHeight        = $(currentDocument).height();    // This is the full document height.

  var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
  var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
  console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}

Answer 9

Typescript实现。

function getScrollPercent(event: Event): number {
  const {target} = event;
  const {documentElement, body} = target as Document;
  const {scrollTop: documentElementScrollTop, scrollHeight: documentElementScrollHeight, clientHeight} = documentElement;
  const {scrollTop: bodyScrollTop, scrollHeight: bodyScrollHeight} = body;
  const percent = (documentElementScrollTop || bodyScrollTop) / ((documentElementScrollHeight || bodyScrollHeight) - clientHeight) * 100;
  return Math.ceil(percent);
}

Answer 10

我的两分钱，以更“现代”的方式被接受。使用 @ babel / preset-env 返回IE9。

// utilities.js

/**
 * @param {Function} onRatioChange The callback when the scroll ratio changes
 */
export const monitorScroll = onRatioChange => {
  const html = document.documentElement;
  const body = document.body;

  window.addEventListener('scroll', () => {
    onRatioChange(
      (html.scrollTop || body.scrollTop)
      /
      ((html.scrollHeight || body.scrollHeight) - html.clientHeight)
    );
  });
};

用法：

// app.js
import { monitorScroll } from './utilities';

monitorScroll(ratio => {
  console.log(`${(ratio * 100).toFixed(2)}% of the page`);
});

Answer 11

使用jQuery

$(window).scrollTop();

将为您提供滚动位置，然后您可以根据窗口高度计算百分比。

还有一个标准的DOM属性scrollTop可以像document.body.scrollTop一样使用但是我不确定这种行为是如何跨浏览器的，我会假设如果存在不一致，那么jQuery方法帐户对于这些。

Answer 12

我找到了纠正上一个答案的方法，因此它适用于所有情况。在Chrome，Firefox和Safari上测试过。

(((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) || 0) * 100)