如何在 JavaScript 中计算不同浏览器的滚动百分比？

在 JavaScript 中确定滚动百分比：跨浏览器方法

为了在确定垂直滚动完成的百分比时实现跨浏览器兼容性，需要一种通用的方法。虽然 Dojo、jQuery、Prototype 和 Mootools 等框架可能提供解决方案，但我们将深入研究原生 JavaScript 方法。

原生 JavaScript 实现

使用 'scrollTop' 和 'scrollHeight' 属性，我们可以计算滚动百分比如下：

<code class="javascript">var h = document.documentElement, 
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';

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

此方法有效地确定了所有主要浏览器中的滚动百分比，包括 Chrome、Firefox 和 IE9 。

jQuery 实现（原始答案）

虽然本机解决方案非常高效，但我们还提供了原始答案的 jQuery 实现：

<code class="javascript">$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
});</code>

注意：移动浏览器上的潜在差异

重要的是请注意，由于 UI 自动隐藏滚动行为，所提供的方法在现代移动浏览器上可能无法达到 100% 的准确性。然而，对于大多数情况，它应该提供跨不同浏览器的滚动百分比的可靠近似值。

以上是如何在 JavaScript 中计算不同浏览器的滚动百分比？的详细内容。更多信息请关注PHP中文网其他相关文章！