javascript - 滚动页面然后在某个位置滚动元素

Question

我对如何做到这一点有点不知所措。

我有一个网页。我希望用户向下滚动，然后在距顶部特定距离处我希望鼠标滚动影响元素位置(使其看起来好像元素正在滚动)。然后当该元素到达某个位置(即顶部:-500)时，我希望滚动再次应用于主网页。关于如何做到这一点的任何想法？

我现在正在研究 fiddle ，但没有任何运气，当我有东西要展示时我会发布

编辑:解决方案/sudo 代码的开头 https://jsfiddle.net/vk0jk37v/23/

附件是我正在应用的一个区域的图像。

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;

// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;

// disables scroll on body
var disableScroll = function() {
    document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
    document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
var scrollImage = function() {
    console.log("called");
   isScrollingImage = true;
   var pageFeature = document.getElementById("inner");
   var pageFeaturePosition;
   pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
    //if (background is scrolled to bottom) {
    //    enableScroll();
    // }
}

//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
    if (scrollY > 720 && !isScrollingImage) {
        disableScroll();
        scrollImage();
    }
    //isScrollingImage = false;
}

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down

document.addEventListener('scroll', checkPosition);

Answer 1

    var thresholdY = 150; 
    var thresholdCounter = 0; 
    var speed = 4; 
    var element = document.getElementById('yourElement'); 

    window.onscroll = function(event) { 
      if(scrollY > thresholdY) { 
        window.scrollTo(0, thresholdY); 
        element.setAttribute('style', 'transform:translate3d(0,' + (--thresholdCounter * speed) + 'px,0);'); 
        return false; 
      }
      return null; 
    }; 

这是一个演示:https://jsfiddle.net/pkt6xnb5/

这里的想法是，当用户到达某个阈值 Y 位置时，您将窗口保持在原位。同样在那个时候，我们沿用户滚动的相反方向沿其 Y 轴变换元素，以使其在向下滚动时向上移动。那是你要找的吗？