Расчет и установка скорости прокрутки объекта в окне просмотра

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

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