Primeiro, vamos entender melhor o que significa Hijacking Scroll.
A tradução literal do termo (pelo Google Translate) é "sequestro de rolagem", o que define perfeitamente o que é.
O sequestro de rolagem é quando você controla a barra de rolagem do usuário, ou seja, o usuário não tem controle da ação que será realizada ao rolar o scroll
, e você define isso em seu código.
Essa é uma atitude "drástica" e existe algumas indagações se seu uso realmente é bom ou que podem trazer problemas, especialmente para dispositivos mobiles.
Agora que sabemos o que é, vamos aos exemplos:
Você pode fazer isso somente com javascript (jQuery) e "sequestrar" o uso do wheel do mouse.
Veja o exemplo abaixo retirado desta pergunta.
// I need to make this dynamic
var currentSection = $('#section1');
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0 && currentSection.next().length > 0) {
currentSection = currentSection.next();
scrollTo(currentSection);
} else if (delta < 0 && currentSection.prev().length > 0) {
currentSection = currentSection.prev();
scrollTo(currentSection);
}
function scrollTo(el) {
realoffSet = el.offset().top;
$("html, body").animate({
scrollTop: realoffSet
}, 500);
}
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
.full {
height: 100%;
width: 100%;
}
#section1 {
background-color: blue;
}
#section2 {
background-color: red;
}
#section3 {
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1" class="full"></div>
<div id="section2" class="full"></div>
<div id="section3" class="full"></div>
Esse é um exemplo simples do seu uso. No exemplo que você mencionou, ainda possui âncoras para as sections
, mas isso é uma funcionalidade a mais.
O exemplo que você postou está utilizando o Velocity.js, conforme muito bem mostrado na resposta o @Leon.
Outro exemplo de plugin para fazer isso é o fullPage.js, que faz o que você deseja além de outros efeitos.
Veja o exemplo de sua utilização abaixo:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
h1 {
font-size: 6em;
}
p {
font-size: 2em;
}
.intro p {
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section {
text-align: center;
}
#menu li {
display: inline-block;
margin: 10px;
color: #000;
background: #fff;
background: rgba(255, 255, 255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active {
background: #666;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
#menu li a {
text-decoration: none;
color: #000;
}
#menu li.active a:hover {
color: #000;
}
#menu li:hover {
background: rgba(255, 255, 255, 0.8);
}
#menu li a,
#menu li.active a {
padding: 9px 18px;
display: block;
}
#menu li.active a {
color: #fff;
}
#menu {
position: fixed;
top: 0;
left: 0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin: 0;
}
#demosMenu {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<input type="hidden" name="id" value="1" />
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section active" id="section1">
<div class="slide">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/1.png" alt="simple" />
<h1>Simple</h1>
<p>Easy to use. Configurable and customizable.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<h1>Cool</h1>
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/3.png" alt="Compatible" />
<h1>Compatible</h1>
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
</div>
</div>
Caso queira saber um pouco mais sobre o assunto, eu achei este artigo bem interessante e também possui alguns argumentos sobre o seu uso.