在向下滾動，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"); 
} 

);

來源

2017-04-23 Soccerlife

可能的複製[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

來源

2017-04-23 17:33:26 maxgallo

是的，我明白了，但我不知道如何。 – 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>

來源

2017-04-23 17:20:32 nitobuendia

它不能正常工作，因爲您可能會在「運行代碼段」中看到。頁面停留在紅色格子上。但是，它應該去綠色的。 – Soccerlife

查看我的最新評論。 – nitobuendia

我不完全明白你的意思，因爲我是新手。感謝您的幫助 – Soccerlife

在向下滾動，100vh滾動至底部

回答

相關問題