滚动页面至特定位置后滚动元素。

Question

滚动页面至特定位置后滚动元素。

javascripthtmlcss

9

我对如何做到这一点有些茫然。

我有一个网页。我希望用户往下滚动，然后在距离顶部特定的距离处，鼠标滚轮可以影响一个元素的位置（让它看起来像是在滚动）。当该元素达到某个位置（例如 top: -500）时，我希望滚动再次应用于主网页。您有什么想法吗？

我正在制作一个演示（fiddle），但没有任何进展，我将在有展示内容的情况下发布。

编辑：解决方案/伪代码的开端：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);

enter image description here

- ReganPerkins

你可以使用onscroll事件，并检查元素位置是否到达所需的位置。然后，你可以将页面滚动回其原始位置。 - Panther

你不是45分钟前问过同样的问题吗？至少先检查一下那里是否有人已经发布了答案。而更改标题并不能使问题变得不重复。 - Alvaro Menéndez

嗨，阿尔瓦罗，我正在查看您对我的上一个问题的答案，并将在一分钟内发布。在另一个问题中，我正在寻找CSS解决方案，而在这个问题中，我正在寻找JS解决方案。我关心我的布局，我可能不得不使用JS来做到这一点（我将在多个上下文中应用此方法）。感谢您在其他问题中的出色回答。对于任何有兴趣的人，他指的是http://stackoverflow.com/questions/29852865/allow-scroll-of-div-set-behind-another-div。 - ReganPerkins

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Benny Schmidt · Accepted Answer

    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轴向相反方向转换它，使其随着用户继续向下滚动而向上移动。这是您要寻找的吗？