Controlling horizontal scrolling when using waypoints.js

Question

I am building a custom wizard form with waypoints. Something interesting is happening and I can't figure it out for the life of me.

My sample CODEPEN is showing 2 pages of the wizard process to show you what I mean.

When you hit the forward action button (search in the first page of the wizard), the waypoints slide from the right and the next page or screen shows. That would repeat on-forward and backwards if I click on the backward action button. That is working.

The problem I see is with the initial horizontal scrollbar. It shows on page load, which it's a problem because the user could just scroll to the next screen by dragging the scrollbar. I thought of giving it an overflow-x but it didn't fix the issue. The interesting thing is, if I click on the search button and the waypoint slides, the scroll bar disappears and gives me the desired effect! What gives?

I built the CODEPEN as close as possible to the real environment so that you guys can catch any conflict with other elements instead of isolating the problem.

Here is the related code just in case:

HTML:

<div id="content" class="content">
    <div class="row page">
       <!-- First page content here -->
    </div>

    <div class="row page2">
       <!-- Second page content here -->
    </div>
</div>

CSS:

.page, .page2 {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 100%;
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s
}

.page {
    -webkit-transform: translateX(0%);
    transform: translateX(0%)
}

.show-page2 .page {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.page2 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.show-page2 .page2 {
    -webkit-transform: translateX(0%);
    transform: translateX(0%)
}

JS:

     (function () {

            var body = $('#content'),
                nav = $('.btn-waypoint'),
                panels = $('#content');

            nav.on('click', function (e) {
                e.preventDefault();
                var dest = $(this).data('panel-link');
                body
                  .removeClass(function (index, css) {
                      // remove only classes start with show-
                      // http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
                      return (css.match(/\bshow-\S+/g) || []).join(' ');
                  })
                  .addClass('show-' + dest);
            });

        }());

The closest fix I've tried to solve this is making page2 display:none on page load to eliminate the scrollbar and then making it visible on button click. That almost did it except a funky look happens between the waypoint sliding effect and the css fade effect. Here is the code for that:

JS

$( document ).ready(function() {
    $('.page2').css('display', 'none');
    $('[data-panel-link]').on('click', function(){
        $('.page2').css('display', 'block');

    });
});

Here is the link to my CODEPEN

Thanks in advance!

score 0 · Answer 1 · answered Mar 01 '16 at 03:02

As it plays out the root of the problem is the hard positioning. The waypoint divs are natively in vertical position which they would obviously not produce a horizontal scrollbar. They are being forced to be side by side by position:absolute and the transform: translateX(-100%) and this creates the horizontal scrollbar. If the mousewheel is disabled via jQuery the scrollbar goes away, but it goes away vertically as well. So instead of fighting that battle, a better alternative is to use a different transition that looks good but doesn't require a side by side animation. A fade will do just nice:

Simply replace the css effects from translateX to the following:

.page, .page2{
    position: absolute;
    width:100%;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.page {
    opacity: 1;
}

.show-page2 .page {
    opacity: 0;
}

.page2{
    opacity: 0;
}

.show-page2 .page2{
    opacity: 1;
}

Controlling horizontal scrolling when using waypoints.js

1 Answers1