javascript - 计算和设置对象在视口(viewport)中的滚动速度

Question

我有一张图片，我正在 div 中滚动。它确保我正在使用的图像可见

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

我现在要做的是确保一旦元素可见，它就能够在离开视口(viewport)之前完全完成滚动。我想我可以通过根据元素距窗口顶部的距离影响速度值来做到这一点。但是我很难做到这一点。

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

 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);

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);