滚动页面然后在certian位置滚动元素

我有一个网页。我想要一个用户向下滚动，然后在距离顶部的特定距离处，我希望鼠标滚动以实现元素位置（使其显示为元素正在滚动的思想）。那么当这个元素碰到一个位置（即顶部：-500）时，我希望滚动再次应用到主网页。有关我如何做到这一点的任何想法？

IM在小提琴的工作，但现在没有任何运气，当我有东西给

编辑，我将发布：附一解决方案/须藤代码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

来源

2015-04-24 ReganPerkins

您可以使用onscroll事件并检查一次该元素在所需位置的位置。您可以将页面滚动回其位置 – Panther

您是否像45分钟前一样提问？。至少在有人发布答案的情况下检查答案。并改变标题并没有减少重复的问题 –

嗨阿尔瓦罗，我现在正在查看你对我最后一个问题的答案，并会在一分钟后发布。在另一个问题，我正在寻找一个CSS解决方案，并与这一个我正在寻找一个JS解决方案。我关心我的布局，我可能不得不看看使用js来做到这一点（我正在将这个应用于多个环境中）。谢谢你在另一个问题上的回应。对于任何有兴趣的人他指的是http://stackoverflow.com/questions/29852865/allow-scroll-of-div-set-behind-another-div – ReganPerkins

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轴相反的方向将元素转换为用户滚动的方向，以使其向上滚动。那是你在找什么？

来源

2015-04-24 19:32:38 Benny

嗨benny我认为这将工作，我只是努力让它在我的小提琴工作（我需要滚动鼠标/标签不仅仅是一个动画，但我认为这个逻辑将工作）控制。当我有它的工作时，我会将答案标记为正确。谢谢！ – ReganPerkins

@ReganPerkins啊好吧，可能有一些方法可以做到这一点。我还没有测试过，但这似乎应该工作（编辑答案） – Benny

@ReganPerkins好吧，我有时间去电脑，现在我意识到它有点复杂。这个小提琴应该适合你要求的功能，但是你必须编写额外的逻辑才能使其反向工作（如果这是你想要的）：https：//jsfiddle.net/pkt6xnb5/ – Benny

滚动页面然后在certian位置滚动元素

回答

相关问题