Restricting Scroll to target id

Question

I am trying to figure out if the following scenario is possible with simple jQuery or javascript, without the use of a plugin.

Here is the base example code:

<div id="section1">
    <!-- content here -->
</div>
<div id="section2">
    <!-- content here -->
</div>
<div id="section3">
    <!-- content here -->
</div>

Each section will fill the viewport in both width and height. What I would like to achieve, is when the viewer scrolls down or up, regardless of the length of the scroll, to simply transition to the next section. I don't want there to be typical scrolling, only transitions to the next or previous section.

I know that I can to this with buttons really easily, and would like to extend this to scrolling. I was checking out a great example of this the other day, but I cannot for the life of me find that page.

I had thought perhaps using a variable to store which section the viewer is currently in, and cycling depending on the direction, but I'm not sure if that is the best approach or even how to get started with that.

Please let me know if I have explained the concept clearly. I would greatly appreciate any thoughts on this.

Thanks!

Answer 1

Using Simple JS? No. Because this type of interaction requires viewport functionality for checking which elements exist in viewport and which ones are partially in view, it would be better off to use a simple plugin that takes into account all user interaction, edge cases and options. Many plugins have been thoroughly debugged by the community for this purpose.

If you'd like to start somewhere for knowledge purposes on this concept, i've highlighted below the steps in a jsfiddle to get you started:

JSFiddle http://jsfiddle.net/3nb0mwoe/13/

HTML

<section id="section1">

</section>
<section id="section2">

</section>
<section id="section3">

</section>

CSS

section {
  height: 100%;
}

#section1 {
  background-color: red;
}

#section2 {
  background-color: blue;
}

JS

/* helpers */

// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom - 25 <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function anyOfElementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

/* START */
// step 1: get all sections and set viewport height for consistency
var $sections = $('section');
$sections.css('height', window.innerHeight);

// step 2: get current section
var $currSection = $.grep($sections, function($s) {
    return isElementInViewport($s);
});

if($currSection.length > 0) {
    $(window).scroll(function(){
    // step 3. check for any section that is 'partially in viewport'
    var $nextAndCurrSection = $.grep($sections, function($s) {
        return anyOfElementInViewport($s);
    });
    if($nextAndCurrSection.length > 0) {
        // remove currSection from list
      var $nextSection = $($nextAndCurrSection).not($($currSection));
      if($nextSection.length > 0) {
        alert('test');
      }
    }
    });
}

Update Based on your requirements, I would currently recommend this plugin: alvarotrigo.com/fullPage