How to make full-page vertical slides that roll with the mouse scroll? [closed]

2

Is it possible to scroll the page by scrolling to a specific element (such as <section> or <div> )? It's like a vertical slide (section) that takes up the entire screen.

As an example, this site I think uses mousewheel fullpage: link

    
asked by anonymous 20.01.2016 / 21:43

2 answers

3

I took a ride in this answer from SOzão , which already had the code ready.

The example is in jQuery, but you can do it in a good way with pure JavaScript (by the way, it is recommended, unless your site is already jQuery based).

The important thing is to understand two concepts:

  • on('mousewheel DOMMouseScroll')

    The mousewheel is triggered when the mouse wheel is triggered; DOMMouseScroll is the Firefox equivalent for this.

  • event.preventDefault();

    As you will manage the mouse wheel event, it is critical that you notify the browser that it is not to use the normal action for that event. Then enter preventDefault .


  • Demonstration

    Click "Run code snippet" just under the following block, click the frame and test with the mouse wheel.

    (function() {
      var delay = false;
    
      $(document).on('mousewheel DOMMouseScroll', function(event) {
        event.preventDefault();
        if(delay) return;
    
        delay = true;
        setTimeout(function(){delay = false},200)
    
        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    
        var a= document.getElementsByTagName('a');
        if(wd < 0) {
          for(var i = 0 ; i < a.length ; i++) {
            var t = a[i].getClientRects()[0].top;
            if(t >= 40) break;
          }
        }
        else {
          for(var i = a.length-1 ; i >= 0 ; i--) {
            var t = a[i].getClientRects()[0].top;
            if(t < -20) break;
          }
        }
        $('html,body').animate({
          scrollTop: a[i].offsetTop
        });
      });
    })();
    body, html { width:100%; height:100%; margin:0; padding:0 }
    a { display:block; color:red; margin-bottom:1em; }
    .page {width:100%;height:100%;margin:0 auto;padding:0 15%;box-sizing:border-box;background:#fee}
    .page:nth-child(odd) {background:#efe}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divclass="page">
      <a name="#A1">Tag #1</a>
      <b>TESTE TAMBEM EM PAGINA TODA -----------></b><br>
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    </div>
    <div class="page">
      <a name="#A2">Tag #2</a>
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.
    </div>
    <div class="page">
      <a name="#A3">Tag #3</a>
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.
    </div>
    <div class="page">
      <a name="#A4">Tag #4</a>
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.
    </div>
        
    20.01.2016 / 22:44
    1

    As an alternative there is already a jQuery plugin ready for this, it's the

    It works like this, by <section> or <div> and also supports back and forward browser:

    Supports:-IE8+-Opera-Chrome-Firefox

    Touseitisnecessarytoaddthistotheheader:

    <linkrel="stylesheet" type="text/css" href="jquery.fullPage.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="vendors/jquery.easings.min.js"></script>
    <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="jquery.fullPage.js"></script>
    

    (If you already added jquery to your site then remove the second line of code above)

    The html should look like this:

    <div id="fullpage">
        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>
    </div>
    

    To initialize you should add this to your main js:

    $(document).ready(function() {
        $('#fullpage').fullpage();
    });
    

    A more complex example with events:

    $(document).ready(function() {
        $('#fullpage').fullpage({
            //Navigation
            menu: '#menu',
            lockAnchors: false,
            anchors:['firstPage', 'secondPage'],
            navigation: false,
            navigationPosition: 'right',
            navigationTooltips: ['firstSlide', 'secondSlide'],
            showActiveTooltip: false,
            slidesNavigation: true,
            slidesNavPosition: 'bottom',
    
            //Scrolling
            css3: true,
            scrollingSpeed: 700,
            autoScrolling: true,
            fitToSection: true,
            fitToSectionDelay: 1000,
            scrollBar: false,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',
            loopBottom: false,
            loopTop: false,
            loopHorizontal: true,
            continuousVertical: false,
            normalScrollElements: '#element1, .element2',
            scrollOverflow: false,
            touchSensitivity: 15,
            normalScrollElementTouchThreshold: 5,
    
            //Accessibility
            keyboardScrolling: true,
            animateAnchor: true,
            recordHistory: true,
    
            //Design
            controlArrows: true,
            verticalCentered: true,
            resize : false,
            sectionsColor : ['#ccc', '#fff'],
            paddingTop: '3em',
            paddingBottom: '10px',
            fixedElements: '#header, .footer',
            responsiveWidth: 0,
            responsiveHeight: 0,
    
            //Custom selectors
            sectionSelector: '.section',
            slideSelector: '.slide',
    
            //events
            onLeave: function(index, nextIndex, direction){},
            afterLoad: function(anchorLink, index){},
            afterRender: function(){},
            afterResize: function(){},
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
            onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
        });
    });
    

    And also supports lazy-load, so change the attribute src by data-src :

    <img data-src="image.png">
    <video>
        <source data-src="video.webm" type="video/webm" />
        <source data-src="video.mp4" type="video/mp4" />
    </video>
    

    And supports anchors:

    <ul id="myMenu">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
        <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
        <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
    </ul>
    
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
        menu: '#myMenu'
    });
    

    Example:

    20.01.2016 / 23:19