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