在向下滚动，100vh滚动至底部

问题描述：

我想在http://www.squaredot.eu/#Intro 在向下滚动，100vh滚动至底部

来达到同样的效果所以，如果我向下滚动，身体必须100vh滚动至底部。而且如果向上滚动，身体必须滚动100vh。我尝试了一些，但没有成功。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title> Log In </title> 
    <link href="main.css" rel="stylesheet" type="text/css"> 
</head> 
    <body> 
     <div id="e1"></div> 
     <div id="e2"></div> 
     <div id="e3"></div> 
     <div id="e4"></div> 
     <div id="e5"></div> 
    </body> 
</html>

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#e1 { 
    width: 100%; 
    height: 100vh; 
    background-color: red; 
} 

#e2 { 
    width: 100%; 
    height: 100vh; 
    background-color: green; 
} 

#e3 { 
    width: 100%; 
    height: 100vh; 
    background-color: yellow; 
} 

#e4 { 
    width: 100%; 
    height: 100vh; 
    background-color: blue; 
} 

#e5 { 
    width: 100%; 
    height: 100vh; 
    background-color: orange; 
}

JAVASCRIPT

document.addEventListener('scroll', function(e) { 
    var currScroll = document.body.scrollTop; 
    document.body.scrollTop = calc(~"currScroll + 100vh"); 
} 

);

可能的复制[jQuery的平滑滚动到锚？]（http://stackoverflow.com/questions/4198041/jquery-smooth-scroll-to-an-anchor） – starcorn

我找不到解决方案。我认为'100vh'是问题 – Soccerlife

答

一种解决方案可以利用CSS变换（像你链接的网站是做）。

添加为CSS：

body { 
    transform: translate3d(0px, 0px, 0px); 
    transition: all 700ms ease; 
}

这是JavaScript的

var pageHeight = window.innerHeight; 

document.addEventListener('scroll', function(){ 
    document.body.scrollTop = 0; 
}); 

document.addEventListener('wheel', function(e) { 
    //console.log(e.deltaY); 
    if(e.deltaY > 0) { 
    scrollDown(); 
    } else { 
    scrollUp(); 
    } 
} 
); 

function scrollDown() { 
    document.body.style.transform = 'translate3d(0px, -'+ pageHeight + 'px, 0px)'; 
} 

function scrollUp() { 
    document.body.style.transform = 'translate3d(0px, 0px, 0px)'; 
}

它仅适用于元素1和2，但它是一个开始，你可以学习如何执行其他步骤！

工作示例这里： https://jsbin.com/titaremevi/edit?css,js,output

UPDATE：

这是完全可行的解决方案：

var pageHeight = window.innerHeight; 
var isAnimating = false; 
document.body.style.transform = 'translate3d(0px,0px,0px)'; 

document.addEventListener('scroll', function(e){ 
    document.body.scrollTop = 0; 
}); 
document.addEventListener('wheel', wheelListener); 

function wheelListener(e) { 
    if(e.deltaY > 0) { 
    scrollPage(-pageHeight); 
    } else { 
    scrollPage(+pageHeight); 
    } 
} 

function scrollPage(scrollSize) { 
    if(isAnimating){ 
    return; 
    } 
    isAnimating = true; 
    var yPos = getNewYPos(scrollSize); 
    document.body.style.transform = 'translate3d(0px,'+ yPos + ',0px)'; 
} 

function getNewYPos(add){ 
    var oldYPos = document.body.style.transform.split(',')[1]; 
    oldYPos = parseInt(oldYPos.replace(/px/,'')); 
    var newYPos = oldYPos + add; 
    if(newYPos > 0){ 
    isAnimating = false; 
    } 
    return Math.min(0, newYPos) + 'px'; 
} 


document.body.addEventListener('transitionend', function(){ 
    setTimeout(function(){ isAnimating = false; }, 500); 
    document.addEventListener('wheel', wheelListener); 
})

你可以看到它在这里工作：https://jsbin.com/foxigobano/1/edit?js,output

是的，我明白了，但我不知道如何。 – Soccerlife

我在答案中添加了完整的实现 – maxgallo

答

我会做的是取消默认滚动行为，然后，使用滚轮进行模拟。

这里的主要挑战是将vh转换为px。我已经用set vh中的一个元素进行转换。它最终变得无用，但它准备好了，以防您想要更改滚动的大小。

工作版本：

// Cancel default scroll. 
 
document.addEventListener('scoll', function(e) { 
 
    e.preventDefault(); 
 
}); 
 

 

 
// Use wheel event to simulate scroll. 
 
document.addEventListener('wheel', function(e) { 
 
    e.preventDefault(); 
 
    // #e1 is 100vh, get height in pixels for conversion rate. 
 
    var pxPerVh = document.querySelector('#e1').offsetHeight/100; 
 
    
 
    console.log('s', document.querySelector('#e1').offsetHeight, pxPerVh); 
 
    
 
    // Current scroll. 
 
    var currScroll = document.body.scrollTop; 
 
    
 
    // Modify scroll 100 vh 
 
    if (e.wheelDelta < 0) { // scroll up 
 
    var newScroll = currScroll - 100 * pxPerVh; 
 
    } else if (e.wheelDelta > 0) { // scroll down 
 
    var newScroll = currScroll + 100 * pxPerVh; 
 
    } else { // no scroll 
 
    var newScroll = 0; 
 
    } 
 
    
 
console.log('p', e.wheelDelta, currScroll, newScroll); 
 
    document.body.scrollTop = newScroll; 
 
});

body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#e1 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#e2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: green; 
 
} 
 

 
#e3 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: yellow; 
 
} 
 

 
#e4 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: blue; 
 
} 
 

 
#e5 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: orange; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> Log In </title> 
 
</head> 
 
    <body> 
 
     <div id="e1"></div> 
 
     <div id="e2"></div> 
 
     <div id="e3"></div> 
 
     <div id="e4"></div> 
 
     <div id="e5"></div> 
 
    </body> 
 
</html>

现在，虽然这是你的要求，我觉得这是不是你真正想要的。我知道你想滚动到下一个div。为此，我将重用该逻辑并注册上次滚动的#eX，并使用document.querySelector（'＃eX'）。scrollTop设置正文的滚动。例如，这可以解决滚动时前一个框中有1-5像素的问题。

正如你已经意识到有关评论这个问题，增加了新的解决方案：

// Define range of divs 
 
var currentDiv = 1; 
 
var minDiv; 
 
var maxDiv; 
 
var extraPixel = 0; 
 

 
var divs = document.querySelectorAll('div[id^="e"]'); 
 
for (var i = 0; i < divs.length; i++) { 
 
    var id = parseInt(divs[i].id.slice(1), 10); 
 
    // Check min div 
 
    if (!minDiv) minDiv = id; 
 
    if (minDiv > id) minDiv = id; 
 
    // Check max div 
 
    if (!maxDiv) maxDiv = id; 
 
    if (maxDiv < id) maxDiv = id; 
 
} 
 

 

 
// Cancel default scroll. 
 
document.addEventListener('scoll', function(e) { 
 
    e.preventDefault(); 
 
}); 
 

 
// Use wheel event to simulate scroll. 
 
document.addEventListener('wheel', function(e) { 
 
    e.preventDefault(); 
 

 
    // Current scroll. 
 
    var currScroll = document.body.scrollTop; 
 
    
 
    // Decide next element. 
 
    if (e.wheelDelta < 0) { // scroll up 
 
    currentDiv--; 
 
    if (currentDiv < minDiv) currentDiv = minDiv; 
 
    } else if (e.wheelDelta > 0) { // scroll down 
 
    currentDiv++; 
 
    if (currentDiv > maxDiv) currentDiv = maxDiv; 
 
    } 
 

 
    console.log(currentDiv); 
 

 
    // Check if there's a next/previous div. 
 
    var goToDiv = document.querySelector('#e' + currentDiv); 
 
    if (goToDiv) { 
 
    var newScroll = goToDiv.offsetTop; 
 
    } 
 
    
 
    document.body.scrollTop = newScroll; 
 
});

body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#e1 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#e2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: green; 
 
} 
 

 
#e3 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: yellow; 
 
} 
 

 
#e4 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: blue; 
 
} 
 

 
#e5 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: orange; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> Log In </title> 
 
</head> 
 
    <body> 
 
     <div id="e1"></div> 
 
     <div id="e2"></div> 
 
     <div id="e3"></div> 
 
     <div id="e4"></div> 
 
     <div id="e5"></div> 
 
    </body> 
 
</html>

它不能正常工作，因为您可能会在“运行代码段”中看到。页面停留在红色格子上。但是，它应该去绿色的。 – Soccerlife

查看我的最新评论。 – nitobuendia

我不完全明白你的意思，因为我是新手。感谢您的帮助 – Soccerlife

在向下滚动，100vh滚动至底部

相关推荐