Question

我正在尝试将此小script转换为纯vanilla JS。

无法正确计算普通的JS值。

我需要如何计算与jQuery版本相同的值？

请在jQuery小提琴中向下滚动，看看我的意思。

$(document).scroll(function() {
    var progressBar = $('progress'),
        docHeight = $(this).height(),
        winHeight = $(window).height(),
        max = docHeight - winHeight,
        value = $(window).scrollTop();
    progressBar.attr('max', max);
    progressBar.attr('value', value);
});

DEMO jQuery

下面，我的纯JS不起作用：

var progressBar = function() {
    var myBar = document.querySelector('progress'),
        docHeight = document.clientHeight,
        winHeight = window.clientHeight,
        max = docHeight - winHeight,
        value = window.scrollY;
    myBar.setAttribute('data-max', myBar.getAttribute('max'));
    myBar.setAttribute('max', max);
    myBar.setAttribute('data-value', myBar.getAttribute('value'));
    myBar.setAttribute('value', value);
};
document.addEventListener('scroll', progressBar);
window.addEventListener('resize', progressBar);

My attempt in vanilla

谢谢！

Answer 1

您需要使用不同的属性来访问文档和窗口高度。

document.clientHeight应为document.body.clientHeight。 clientHeight属性旨在返回HTML元素的计算高度。使用body元素符合该设计。
window.clientHeight应为window.innerHeight。由于window不是HTML元素，因此它有its own height properties。

我还简化了进度条属性设置逻辑。除非您有一些外部要求来设置data-max和data-value属性，否则您可以删除这些行。如果您执行需要设置这些属性，则可以使用dataset property。

var progressBar = function() {
    var myBar = document.querySelector('progress'),
        docHeight = document.body.clientHeight,
        winHeight = window.innerHeight,
        max = docHeight - winHeight,
        value = window.scrollY;
    myBar.setAttribute('max', max);
    myBar.setAttribute('value', value);
};
document.addEventListener('scroll', progressBar);
window.addEventListener('resize', progressBar);

See JSFiddle

Answer 2

Running Steam on ubuntu 18.04 64-bit STEAM_RUNTIME is enabled automatically Installing breakpad exception handler for appid(steam)/version(0) libGL error: unable to load driver: swrast_dri.so libGL error: failed to load driver: swrast或clientHeight上不存在window属性。如果您查看the JQuery docs：

document返回浏览器视口的高度
$(window).height()返回HTML文档的高度

已经a great answer on StackOverflow解释了获得身高的不同方法。查看JQuery source，窗口的高度使用$(document).height()。对于文档，它使用最大值：

window.innerHeight
document.body.scrollHeight
document.body.offsetHeight

总而言之，它适用于AOK：https://jsfiddle.net/pd3dtvxn/7/

进度条 - jQuery到Pure Vanilla JS

2 个答案: