检测图像时慢速滚动

Question

我遇到了问题。

1. 我们有一个包含可滚动文字的页面
2. 检测到图像时，滚动应该更慢
3. 当图像结束时，滚动会恢复到默认速度。

我已经检测到了元素，并尝试使用变换来减慢滚动，但没有运气。它有点慢，但看起来不太合适。

function elementInViewport2(el) {
      var top = el.offsetTop;
      var left = el.offsetLeft;
      var width = el.offsetWidth;
      var height = el.offsetHeight;

      while(el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
      }

      return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
      );
    }

    /*window.addEventListener('scroll', function(e) {
       var el = document.getElementById('slides');

       console.log(elementInViewport2(el));
    });*/

    $.fn.moveIt = function(){
      var $window = $(window);
      var instances = [];

      $(this).each(function(){
        instances.push(new moveItItem($(this)));
      });

      window.addEventListener('scroll', function(){
        var scrollTop = $window.scrollTop();
        var el = document.getElementById('slides');

        if (elementInViewport2(el)) {
          instances.forEach(function(inst){
            inst.update(scrollTop, -20);
          });
        }
      }, {passive: true});
    }

    var moveItItem = function(el){
      this.el = $(el);
      console.log(el);
      this.speed = parseInt(this.el.attr('data-scroll-speed'));
    };

    moveItItem.prototype.update = function(scrollTop, speed){
      this.el.css('transform', 'translateY(' + -(scrollTop / speed) + 'px)');
    };

    // Initialization
    $(function(){
      $('[data-scroll-speed]').moveIt();
    });

https://jsfiddle.net/pnrszyzn/