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

计算＆amp;在视口中设置对象的滚动速度

0 个答案: