How to implement a "scroll hijacking"

Question

How to implement a "scroll hijacking"

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (0 votes)

6

I have noticed in several modern pages a scrolling behavior that goes up to certain interest part of the content, researching, I discovered that this type of behavior is called "hijacking". The term "hijacking" literally translated means "kidnapping." Perhaps it has some connection with the fact that in these pages the scroll definitely disappears and presents this new behavior. I also saw that there are compatibility issues with this "effect".

Attempting to reproduce this behavior, I figured I'd work with the scrollTop , when the position of scroll was over section I would use .animate passing the scrollTop position, but I did not succeed.

Finally, I would like to know how to implement something similar, or if someone already has something ready and wants to share, thank you.

Here's an example of hijacking scroll: codyhouse - hijacking , just enable the option hijacking.

javascript html jquery css

asked by anonymous 06.06.2017 / 15:37

3 answers

1

I created a fiddle using this Velocity Hijacking Scroll used in your example and you can check it out there. In that case it's all based on Velocity.js, which is a plugin that will do all the animation for you using just a few simple commands.

You can check that in <body> there is the option to turn on / off scroll hijacking.

Follow the link: Velocity - Scroll Hijacking

Detail Important: It has no Mobile operation

06.06.2017 / 16:55

0

I created a simple and practical example:

jQuery(document).ready(function() {
  jQuery('li').click(function(){
  		switch(jQuery(this).text().trim()){
      	case 'Vermelho':
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        break;
        case 'Verde':
        $('html, body').animate({
            scrollTop: 500
        }, 500);
        break;
        case 'Azul':
        $('html, body').animate({
            scrollTop: 1000
        }, 500);
        break;
      }
  })
});

ul {
  position: fixed;
  float: left;
  height: 50px;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}

ul li {
  float: left;
  width: 150px;
  cursor: pointer;
  color: #000;
  border: 1px solid #000;
  background: #CCC;
}

ul li:hover {
  background: #CCC:
}

div {
  width: 100%;
  height: 500px;
  float: left;
}

.a {
  background: red;
}

.b {
  background: green;
}

.c {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul><li>Vermelho</li><li>Verde</li><li>Azul</li></ul><divclass="a"></div>
<div class="b"></div>
<div class="c"></div>

06.06.2017 / 16:59

How popular is a model from a DataReader in C #? Regex within SQL Server

score 4 · Accepted Answer

First, let's better understand what it means Hijacking Scroll .

The literal translation of the term ( by Google Translate ) is "scroll hijacking", the which perfectly defines what it is.

Scroll hijacking is when you control the user's scrollbar, that is, the user has no control over the action that will be performed by rolling the scroll , and you set this in your code.

This is a "drastic" attitude and there are some questions if your use is really good or can bring problems, especially for mobile devices.

Now that we know what it is, let's look at the examples:

You can only do this with javascript (jQuery) and "hijack" the use of the wheel of the mouse.

See the example below removed from this question.

// 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><divid="section1" class="full"></div>
<div id="section2" class="full"></div>
<div id="section3" class="full"></div>

This is a simple example of its use. In the example you mentioned, you still have anchors for sections , but this is an additional feature.

The example you posted is using Velocity.js as shown in response or @Leon .

Another example of a plugin to do this is fullPage.js , which does what you want besides other effects .

See the example below:

$(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><linkhref="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><ulid="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>

If you want to know a little more about it, I found this article quite interesting and also has some arguments about its use.