Question

我正在构建一个包含多个进度条的页面，这些栏有以下问题：

1 - 当页面上显示时，进度条会加载。问题是，只要第一个在视口上可见，它们就会同时加载。它们应该在它们一个接一个地进入视口时加载。

2 - 另一个问题是，当我在页面底部并刷新浏览器时，只有当我一直向后滚动到第一个栏时才会触发动画。

请看一下示例：

我希望有人能帮助我解决这个问题。非常感谢！

JS

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  var IsViewed = false;
  $(document).scroll(function() {
    if (isScrolledIntoView('.progress-bar') && !IsViewed) {
      $('.bar-percentage[data-percentage]').each(function() {
        var progress = $(this);
        var percentage = Math.ceil($(this).attr('data-percentage'));
        $({
          countNum: 0
        }).animate({
          countNum: percentage
        }, {
          duration: 3500,
          easing: 'swing',
          step: function() {
            // What todo on every count
            var pct = '';
            if (percentage == 0) {
              pct = Math.floor(this.countNum) + '%';
            } else {
              pct = Math.floor(this.countNum + 1) + '%';
            }
            progress.text(pct) && progress.siblings().children().css('width', pct);
          }
        });
      });
      IsViewed = true;
    }
  });

Answer 1

您正在使用所有进度条，您需要逐个处理它们，并且您处理的每个进度条都会向其添加一个类以便不再处理它

＆＃13;

message = message.replaceAll("(?<=\\d)\\s+(?=\\d)","");

＆＃13;

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function() {

  $('.bar-percentage[data-percentage]:not(.viewed)').each(function() {
    var progress = $(this);
    if (isScrolledIntoView(progress.parent('.progress-bar'))) {

      var percentage = Math.ceil($(this).attr('data-percentage'));
      progress.addClass('viewed');
      $({
        countNum: 0
      }).animate({
        countNum: percentage
      }, {
        duration: 3500,
        easing: 'swing',
        step: function() {
          // What todo on every count
          var pct = '';
          if (percentage == 0) {
            pct = Math.floor(this.countNum) + '%';
          } else {
            pct = Math.floor(this.countNum + 1) + '%';
          }
          progress.text(pct) && progress.siblings().children().css('width', pct);
        }


      });

    }
  });

  IsViewed = true;

});

＆＃13;

h2 {
  margin-bottom: 400px;
}

.progress-bar {
  position: relative;
  margin: 0 auto 2.0rem;
  height: 5.0rem;
  font-size: 0.8em;
  color: #000;
}

.progress-bar:last-child {
  margin-bottom: 0;
}

.bar-label {
  font-size: 12px;
  color: #000;
  text-transform: none;
  text-align: left;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.bar-percentage {
  margin: 0 auto;
  font-size: 1.0rem;
  position: absolute;
  top: 0.4rem;
  right: 0;
}

.bar-container {
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: #EFEFEF;
}

.progress-bar.thick-bar .bar-container,
.progress-bar.thick-bar .bar {
  height: 1.0rem;
}

.bar {
  float: left;
  background: #000;
  height: 1px;
}

＆＃13;

Updated JSfiddle

进度条未单独加载

1 个答案: