Javascript 当到达页面上的特定DOM元素时，如何触发进度条动画功能？

我正在网页上使用动画进度条，但在函数执行时间方面遇到了意外问题。这些条在页面加载时加载，但理想情况下，我希望在到达页面上的某个DOM元素时让它们这样做。这似乎可以通过使用jQuery scroll事件来完成，但我不知道如何修改我正在使用的代码以满足上述要求。使用的代码是：

function setBarWidth(dataElement, barElement, cssProperty, barPercent) {
  var listData = [];
  $(dataElement).each(function() {
    listData.push($(this).html());
  });
  var listMax = Math.max.apply(Math, listData);
  $(barElement).each(function(index) {
    $(this).css(cssProperty, (listData[index] / listMax) * barPercent + "%");
  });
}
setBarWidth(".style-1 span", ".style-1 em", "width", 100);

提前谢谢你的帮助