如何确定不同浏览器中 JavaScript 的垂直滚动百分比？

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

确定用户垂直滚动百分比的能力对于实现滚动至关重要Web 应用程序中的依赖功能。本综合指南提供了跨浏览器解决方案，可准确计算滚动百分比。

非框架解决方案

对于 Chrome、Firefox 和 IE9 等浏览器，以下公式可用于计算滚动百分比：

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

其中：

• h 是文档的根元素
• b 是文档的正文元素
• st 是 'scrollTop' （对于 WebKit 浏览器）或 'scrollTop' （对于其他浏览器）
• sh 是 'scrollHeight' （对于 WebKit 浏览器）或 'scrollHeight' （对于其他浏览器） )

函数实现

您可以将这个公式封装成一个函数以便复用：

<code class="javascript">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;
}</code>

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;
  
  console.clear();
  console.log(scrollPercent);
})</code>

注意

• 对于现代移动浏览器，由于浏览器 UI 自动隐藏滚动行为，解决方案可能无法达到 100%。
• jQuery 解决方案基于提供的原始答案。

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