How To Create Full Section Scrolling With Joomla Website Builder Gridbox

25 January 2018

Following the trends of the time, Full Section Scrolling it's an awesome and modern effect. In today's “Trick & Tip” we will show you how to add an incredibly beautiful Full Section Scrolling by single mouse scroll.

The main idea of the Full Section Scrolling effect that you can navigate between Gridbox sections by single mouse scroll, keyboard arrows and single touch on mobile devices.

View Demo Theme

Joomla Website Builder Gridbox already includes almost everything what you need to create a stunning Joomla website with a Full Section Scrolling Animation:

• Full-Screen sections;
• Dot Navigation (One Page Menu Plugin).

All you need to do is to add Javascript code and a little bit of CSS. Let's get started!

Step 1. Configure Sections

Open Section settings, in the tab "General" select "Full Screen"
Scroll down to field "Class Suffix". Paste this CSS class: ba-section-scrolling

Step 2. JavaSript Code

Open Gridbox JavaScript Editor.

Copy JS code below and paste into the Gridbox JavaScript editor.

jQuery(document).on('ready', function(){
    var scrolling = false,
        delta = 1,
        $window = jQuery(window),
        startCoords = {},
        endCoords = {},
        touch = {
            passive: false
        },
        sections = jQuery('.ba-section-scrolling');

    function compileValue(item){
            var value = item.offset().top,
                header = $g('header.header'),
                comp = header[0] ? getComputedStyle(header[0]) : {},
                top = window.pageYOffset,
                stickies = $g('.ba-sticky-header'),
                sticky = 0;
            if (item.closest('.ba-wrapper').parent().hasClass('header')) {
                value = 0;
            } else {
                stickies.each(function(){
                    if (this.offsetHeight > 0) {
                        let section = this.querySelector('.ba-sticky-header > .ba-section'),
                            obj = app.items[section.id],
                            offset = obj.desktop.offset;
                        if (app.view != 'desktop') {
                            for (var ind in breakpoints) {
                                if (!obj[ind]) {
                                    obj[ind] = {};
                                }
                                offset = obj[ind].offset ? obj[ind].offset : offset;
                                if (ind == app.view) {
                                    break;
                                }
                            }
                        }
                        if ((!obj.scrollup && offset < value) || (obj.scrollup && offset < value && value < top)) {
                            sticky = this.offsetHeight > sticky ? this.offsetHeight : sticky;
                        }
                    }
                });
                if ((!header.hasClass('sidebar-menu') || (app.view != 'desktop' && app.view != 'laptop')) && comp.position == 'fixed') {
                    sticky = header[0].offsetHeight > sticky ? header[0].offsetHeight : sticky;
                    if (header.find('.resizing-header').length > 0) {
                        var resizingSection = getComputedStyle(header.find('.resizing-header')[0]);
                        value += resizingSection.paddingTop.replace('px', '') * 1;
                        value += resizingSection.paddingBottom.replace('px', '') * 1;
                    }
                }
                if (value != 0) {
                    value -= sticky;
                }
            }

            return value;
        }
 
    function animateScroll()
    {
        if (typeof(onePageScroll) == 'undefined' || typeof(onePageScroll) != 'undefined' && onePageScroll) {
            var scroll = $window.scrollTop(),
                index = 0;
            sections.each(function(ind){
                var value = compileValue(jQuery(this));
                console.info(Math.floor(value), Math.floor(scroll))
                if (Math.floor(value) == Math.floor(scroll)) {
                    index = ind + (-1 * delta);
                    return false;
                }
            });
            if (index >= 0 && index < sections.length) {
                scrolling = true;
                var value =  compileValue(jQuery(sections[index]));
                jQuery('html, body').stop().animate({
                    scrollTop: value
                }, 1000, function(){
                    setTimeout(function(){
                        scrolling = false;
                    }, 200);
                });
            }
        }
    }
    window.addEventListener('wheel', function(){
        event.preventDefault();
        var value = event.wheelDelta || -event.deltaY || -event.detail;
        delta = Math.max(-1, Math.min(1, value));
        if (scrolling) {
            return false;
        }
        animateScroll();
    }, {passive: false});
    $window.on('keydown', function(event){
        var flag = false;
        if (flag = event.keyCode == 38 || event.keyCode == 33) {
            delta = 1;
        } else if (flag = event.keyCode == 40 || event.keyCode == 34) {
            delta = -1;
        }
        if (flag) {
            event.preventDefault();
            if (!scrolling) {
                animateScroll();
            }
        }
    });
});

Step 3. CSS Code

And the final step. Here we will add CSS code to hide the page scrollbar. Open Gridbox CSS Editor.

Copy CSS code below and paste into the Gridbox CSS editor

body.page {
    overflow-y: hidden;
}

Download Demo theme

If you have any questions, do not hesitate to write in the comments below, we'll help you. Let's build beautiful websites with Joomla Website Builder Gridbox.