计算并设置视口内对象的滚动速度

Question

我有一张图片在一个div内滚动。 为了确保图片可见，我使用了

var isVisible = (
    threshold.top >= -39 &&
    threshold.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );

我现在想做的是确保元素可见后在完全滚动出视口之前能够完成滚动。我认为可以通过根据元素距离窗口顶部的距离影响速度值来实现这一点。但我很难做到这一点。

我正在使用.getBoundingClientRect()获取元素距离视口顶部的距离：

 var threshold =  document.getElementById('page-feature').getBoundingClientRect();
    var thresholdY = threshold.top;

以下是我目前的代码：

    function scrollImageInViewport() {
      var threshold =  document.getElementById('page-feature').getBoundingClientRect();
      var thresholdY = threshold.top;
      var isVisible = (
        threshold.top >= -39 &&
        threshold.bottom <= (window.innerHeight || document.documentElement.clientHeight)
      );

      if (isVisible && window.innerWidth > 550) {
        scrollDir(thresholdY);
      } 
    }

    function scrollUp(thresholdY) { 
      if (thresholdCounter < maxScrollNegative) {
          return;
      } else {
        pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0); -ms-transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0); transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0);'); 
      }  
    }; 

    function scrollDown(thresholdY) { 
      if (thresholdCounter > maxScrollPositive) {
          return;
      } else {
        pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0); -ms-transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0); transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0);');  
      }   
    }; 

    function scrollToTop(){
      initScroll();
      pageScroll.setAttribute('style', 'transform:translate3d(0,0,0);'); 
      thresholdCounter = 0;
    };


    function scrollDir(thresholdY) {
      var scroll = window.scrollY;
      if(scroll > position) {
        distanceFromTop(thresholdY);
        scrollUp(thresholdY);
      } else if (scroll < position ){
        scrollDown(thresholdY);
      }
      position = scroll;
    };

    function distanceFromTop(thresholdY) {
        if (thresholdY > 0) {
 `enter code here`//set speed as distance from top /px of not shown content 
          speed = (scrollImageHeight - scrollVisibleHeight) / thresholdY;
        }

    };

    function initScroll(){
      position = window.scrollY;
      pageScroll = document.getElementById('page-scroll'); 
      scrollImageHeight = pageScroll.offsetHeight; //total height of scroll image
      pagePanel =  document.getElementById("pagePanel");
      pageStyle = window.getComputedStyle(pagePanel,"");
      size = pageStyle.getPropertyValue("height");
      scrollVisibleHeight = parseInt(size, 10);//visible height of scroll image
      scrollImageEnd = scrollImageHeight - scrollVisibleHeight;
      maxScrollNegative = -scrollImageEnd / speed;
    }

    var speed; 
    var thresholdCounter = 0; 
    var maxScrollPositive = 0;
    var position, 
      pageScroll, 
      scrollImageHeight, 
      pagePanel, 
      pageStyle, 
      size, 
      scrollVisibleHeight, 
      scrollImageEnd,
      maxScrollNegative;

    window.addEventListener('resize', scrollToTop);
    document.addEventListener('scroll', scrollImageInViewport);
    window.addEventListener('load', initScroll);

- ReganPerkins

Answer 1

以下是我的成果:

var featurePage =  document.getElementById('page-feature')
var pageScroll = document.getElementById('page-scroll'); 

var startP, // where animation needs to begin
  endP, // where animation needs to end
  diff; // visible element size

function getElementOffset(){ //init
    var de = document.documentElement;
    var box = featurePage.getBoundingClientRect();
    var top = box.top + window.pageYOffset - de.clientTop;
    var bottom = box.bottom + window.pageYOffset - de.clientTop;
    var winHight = window.innerHeight; 

    diff = bottom - top;
    var elPadding = (winHight - diff);

    startP = top - elPadding;
    endP = bottom - elPadding;

    scrollImage()
}

function scrollImage(){
  var scrollImageHeight = pageScroll.offsetHeight;
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - startP;
  var realPos = -s1/diff;
  var lengthLeft = scrollImageHeight - (diff)  
  if ( realPos < 0.09 && realPos > -1){
    pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (realPos * lengthLeft) + 'px,0); -ms-transform:translate3d(0,' + (realPos *lengthLeft) + 'px,0); transform:translate3d(0,' + (realPos *lengthLeft) + 'px,0);'); 
  }
}

window.addEventListener('resize', getElementOffset);
document.addEventListener('scroll', getElementOffset);

- ReganPerkins