Ошибка говорит об этом, измените:
ViewPager mPager = (ViewPager) findViewById(R.id.fieldspager);
на
final ViewPager mPager = (ViewPager) findViewById(R.id.fieldspager);
Одним из решений может быть использование преобразования из 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 ./ / 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
Что бы я сделал, это отменить поведение прокрутки по умолчанию, а затем использовать колесо для имитации.
Основная задача здесь - преобразовать vh в px. Я использовал один из элементов с множеством 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>
// 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>