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

     }()); 

我试图解决这个问题的最接近的解决方法是，在页面加载时使页面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禁用鼠标滚轮，滚动条将消失，但它也会垂直消失。因此，与其打倒这场战斗，更好的选择是使用看起来不错的不同过渡，但不需要并排动画。淡入淡出会做得很好：

只需更换从平移X的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; 
}