Question

我有一个可滚动的容器.vertical-slider，其中包含卡片.item和图片和文字。容器中可以有200多个物品。

HTML

<div class="vertical-slider" data-index="{{ index }}" data-alpha="{{ titleFirstChar }}">
  <div class="item">{{ image + text }} </div>
  <div class="item">{{ image + text }} </div>
  <div class="item">{{ image + text }} </div>
  ... up to 200+ items
</div>

SCSS

.vertical-slider {
  padding-bottom: 33vh;
  padding-top: 33vh;
  overflow-y: scroll;
  height: 100vh;
  min-height: 100vh;


  .item {
    opacity: .5;
    transform: scale(0.9);
    transition: transform .3s;

    &.is-active {
      opacity: 1;
      transform: scale(1.0);
    }
  }
}

在滚动.vertical-slider时，我正在使用JS / jQuery来应用CSS类.is-active（这将更改不透明度并进行变换：缩放），并更新最靠近垂直中心的项目的项目计数器视口，实质上是在视觉上“聚焦”中间项目。

$('.vertical-slider').on('scroll', function() {

  $(this).stop();
  var dist = 520;

  $('.vertical-slider .item').each(function(){

    var self = this;
    var above = checkVisible( self, dist, 'above');
    var below = checkVisible( self, dist, 'below');

    if (checkVisible(self, dist)) {
      self.classList.add('is-active');
    } else {
      self.classList.remove('is-active');
    }
  });

  $('.slide-counter .item-number').html($('.vertical-slider .item.is-active').data('index'));
});



function checkVisible(elm, threshold, mode) {

  threshold = threshold || 0;
  mode = mode || 'visible';

  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  var above = rect.bottom - threshold < 0;
  var below = rect.top - viewHeight + threshold >= 0;

  return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}

也许不足为奇的是，这对CPU造成了很大的负担（我的风扇大声旋转），每次滚动checkVisible()时，每个.item都会触发.vertical-slider。我想知道是否有人会建议一种更有效的方法，从而需要更少的硬件处理能力？ JS不是我的强项，所以如果我在这里使用了次优的方法来实现它，也不会感到惊讶。

是否有更有效的方法来实现这种循环功能，从而需要更少的硬件处理能力？

0 个答案: