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

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

1 个答案: