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

我正在用航路点构建一个自定义向导表单。一些有趣的事情正在发生，我一辈子都搞不清楚

我的示例代码笔显示了向导过程的两页，向您展示了我的意思

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

我看到的问题是初始水平滚动条。它在页面加载时显示，这是一个问题，因为用户可以通过拖动滚动条滚动到下一个屏幕。我想给它一个

overflow-x

，但它没有解决这个问题。有趣的是，如果我点击搜索按钮，航路点滑动，滚动条就会消失，给我想要的效果！有什么好处

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

以下是相关代码，以防万一：

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>

.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%)
}

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

        }());

JS:

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

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

.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%)
}

     (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');

    });
});

这是我的网站的链接

---

提前谢谢

问题的根源在于定位困难。航路点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;
}

---

我看不出有什么不同