javascript - 使用 waypoints.js 时控制水平滚动

Question

我正在构建一个带有航路点的自定义向导表单。一些有趣的事情正在发生，但我一辈子都弄不明白。

我的示例 CODEPEN 显示了向导过程的 2 页，以向您展示我的意思。

当您点击前进操作按钮(在向导的第一页中搜索)时，航路点会从右侧滑动并显示下一页或屏幕。如果我单击向后操作按钮，那将重复向前和向后。那是有效的。

我看到的问题是初始水平滚动条。它在页面加载时显示，这是一个问题，因为用户可以通过拖动滚动条滚动到下一个屏幕。我想给它一个 overflow-x 但它没有解决问题。有趣的是，如果我点击搜索按钮并且航点滑动，滚动条就会消失并给我想要的效果!是什么赋予了？

我构建的 CODEPEN 尽可能接近真实环境，这样你们就可以捕捉到与其他元素的任何冲突，而不是孤立问题。

以下是相关代码以防万一:

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);
            });

        }());

我尝试解决的最接近的修复方法是在页面加载时使 page2 display:none 消除滚动条，然后在单击按钮时使其可见。这几乎做到了，除了航点滑动效果和 css 淡入淡出效果之间出现了一个时髦的外观。这是相关代码:

JS

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

    });
});

这是我的 CODEPEN 的链接

提前致谢!

Answer 1

问题的根源在于硬定位。航路点 div 本身处于垂直位置，它们显然不会产生水平滚动条。它们被迫与 position:absolute 和 transform: translateX(-100%) 并排放置，这会创建水平滚动条。如果通过 jQuery 禁用鼠标滚轮，则滚动条会消失，但它也会垂直消失。因此，与其打那场仗，更好的选择是使用看起来不错但不需要并排动画的不同过渡。淡入淡出会很好:

只需将 translateX 中的 css 效果替换为以下内容:

.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;
}