我对如何做到这一点感到有点失落。
我有一个网页。我希望用户向下滚动,然后在距离顶部特定距离处我希望鼠标滚动以实现元素位置(使其看起来像是元素滚动)。然后,当该元素到达某个位置时(即顶部:-500),我希望滚动再次应用于主网页。有关如何做到这一点的任何想法?
我现在正在努力工作,但没有任何运气,我会在有东西展示时张贴
编辑:解决方案/ 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);
答案 0 :(得分:3)
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轴转换元素,使其在向下滚动时向上移动。这就是你要找的东西吗?