As I work on creating a custom wizard form with waypoints, I've encountered an interesting issue that has left me puzzled.
In my sample CODEPEN, you can see two pages of the wizard process to better understand the problem.
Upon clicking the forward action button (search on the first page of the wizard), the waypoints slide from the right and reveal the next page or screen. This function also works when using the backward action button. However, the initial horizontal scrollbar presents an unexpected challenge as it allows users to scroll to the next screen by dragging the scrollbar. Although I tried setting overflow-x, it did not resolve the issue. The curious part is that once I click on the search button and the waypoint slides, the scrollbar disappears, providing the desired effect. Why does this happen?
I aimed to replicate the real environment in the CODEPEN to identify any conflicts with other elements rather than isolating the problem.
Here is some relevant code:
HTML:
<div id="content" class="content">
<div class="row page">
<!-- Content for the first page -->
</div>
<div class="row page2">
<!-- Content for the second page -->
</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) {
return (css.match(/\bshow-\S+/g) || []).join(' ');
})
.addClass('show-' + dest);
});
}());
The solution I attempted involved hiding page2 on page load to eliminate the scrollbar, then displaying it upon button click. While this approach almost resolved the issue, there was a slight visual glitch between the waypoint sliding effect and the CSS fade effect. Here is the corresponding code:
JS
$( document ).ready(function() {
$('.page2').css('display', 'none');
$('[data-panel-link]').on('click', function(){
$('.page2').css('display', 'block');
});
});
You can access my CODEPEN here.
I appreciate any assistance provided!