4
Hello, I’m studying Touch Events and making an example of a page with full sections that passes one by one on the screen.
I did the CSS, HTML and Script, the basic works... But when I test on the phone, if you move your finger up/down quickly it gives a latch and makes the scroll.
Follows the code:
$(function () {
// Touch Events
window.addEventListener("touchstart", handleStart, false);
window.addEventListener("touchmove", handleMove, false);
window.addEventListener("touchcancel", handleCancel, false);
window.addEventListener("touchend", handleEnd, false);
var posIniY = 0;
var posFimY = 0;
var changePage = false;
function handleStart(evt) {
console.log('Start');
posIniY = evt.touches[0].screenY;
changePage = false;
}
function handleMove(evt) {
console.log('Move');
posFimY = evt.touches[0].screenY;
changePage = true;
}
function handleEnd() {
console.log('End');
var scrollActive = $('#navegacao').find('.scroll.active').parent();
if( changePage ) {
var difY = (posIniY - posFimY);
if( difY > 50 ) {
// Move para baixo
scrollActive.next('.nav-item').find('.scroll').click();
changePage = false;
} else if( difY < -50 ) {
// Move para cima
scrollActive.prev('.nav-item').find('.scroll').click();
changePage = false;
} else {
scrollActive.find('.scroll').click();
return false;
}
}
changePage = false;
}
function handleCancel() {
console.log('Cancel');
changePage = false;
}
// Navegação vertical
var scrollLinkY = $('.scroll');
scrollLinkY.eq(0).click().addClass('active');
// Scroll suave
scrollLinkY.click(function (e) {
console.log('scroll suave');
var $this = $(this);
if ($this.hasClass('scroll')) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
}
if (!$this.hasClass('active')) {
scrollLinkY.removeClass('active');
$this.addClass('active');
}
});
// Usa as teclas
window.addEventListener("keydown", function (e) {
var itemActive = $('#navegacao').find('.scroll.active').parent();
$('.scroll.d-md-none').remove();
switch (e.key) {
case 'ArrowUp':
itemActive.prev('.nav-item').find('.scroll').click();
break;
case 'ArrowDown':
itemActive.next('.nav-item').find('.scroll').click();
break;
case 'Home':
scrollLinkY.eq(0).click();
break;
case 'End':
scrollLinkY.eq(-1).click();
break;
}
}, true);
// Animações no scroll
var secoes = $('section'),
classAnima = 'animated';
function animeOnScroll() {
setTimeout(function () {
var disTop = $(document).scrollTop() + 200;
secoes.each(function () {
var itemTop = $(this).offset().top;
if (disTop >= itemTop) {
$(this).addClass(classAnima);
}
});
}, 1000);
}
animeOnScroll();
});
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
border: 0 none;
outline: 0 none;
}
body {
font: 16px 'Roboto', sans-serif;
}
section {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
section h3 {
color: #fff;
font-size: 42px;
}
.blue {
background-color: #0d527d;
}
.purple {
background-color: #8c4267;
}
.wine {
background-color: #4b0000;
}
.red {
background-color: #a61615;
}
.orange {
background-color: #f54b06;
}
.green {
background-color: #308c4a;
}
/* Menu lateral seções */
#navegacao {
position: fixed;
top: 50%;
right: 40px;
padding: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
}
#navegacao .nav-item {
margin: 6px 0;
list-style: none;
}
#navegacao .nav-item .nav-link {
display: block;
padding: 0;
background-color: transparent;
}
#navegacao .nav-item .nav-link::before {
content: '';
display: block;
width: 7px;
height: 7px;
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: .15;
}
#navegacao .nav-item .nav-link:hover::before,
#navegacao .nav-item .nav-link.active::before {
opacity: 1;
}
#navegacao .nav-item .nav-link span {
position: absolute;
top: -3px;
width: 150px;
color: rgba(255,255,255,1);
text-align: right;
pointer-events: none;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
#navegacao .nav-item .nav-link:hover span {
animation: fadeInLeft .8s cubic-bezier(.5,.9,.1,.9);
animation-fill-mode: forwards;
}
<nav id="navegacao" class="navbar d-none d-md-block">
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link scroll" href="#secao01"><span>Seção 01</span></a></li>
<li class="nav-item"><a class="nav-link scroll" href="#secao02"><span>Seção 02</span></a></li>
<li class="nav-item"><a class="nav-link scroll" href="#secao03"><span>Seção 03</span></a></li>
<li class="nav-item"><a class="nav-link scroll" href="#secao04"><span>Seção 04</span></a></li>
<li class="nav-item"><a class="nav-link scroll" href="#secao05"><span>Seção 05</span></a></li>
<li class="nav-item"><a class="nav-link scroll" href="#secao06"><span>Seção 06</span></a></li>
</ul>
</nav>
<section id="secao01" class="blue"><h3>Seção 01</h3></section>
<section id="secao02" class="purple"><h3>Seção 02</h3></section>
<section id="secao03" class="wine"><h3>Seção 03</h3></section>
<section id="secao04" class="red"><h3>Seção 04</h3></section>
<section id="secao05" class="orange"><h3>Seção 05</h3></section>
<section id="secao06" class="green"><h3>Seção 06</h3></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It worked @Kamile?
– Vitor Luiz da Silva
I combined the two answers, but the problem was double Scroll, the default browser and my script. Follow the link to analyze in the codepen and test: https://codepen.io/kamile-pimenta/pen/eLzNpx
– Kamile Pimenta